`
happmaoo
  • 浏览: 4472651 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

用Javascript制作倒数计秒器

阅读更多

00:00:11:00 /* This notice must be untouched at all times. countdown.js v. 1.0 The latest version is available at http://blog.csdn.net/yjgx007 Copyright (c) 2004 Xinyi.Chen. All rights reserved. Created 7/30/2004 by Xinyi.Chen. Web: http://blog.csdn.net/yjgx007 E-Mail: chenxinyi1978@hotmail.com Last modified: 7/30/2004 This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; See the GNU General Public License at http://www.gnu.org/copyleft/gpl.html for more details. */ var elapse = 100; var start = document.all("clock").innerText; var finish = "00:00:00:00"; var timer = null; function onTimer(i) { if (start == finish) { window.clearTimeout(timer); alert("time is reach!"); return; } var hms = new String(start).split(":"); var ms = new Number(hms[3]); var s = new Number(hms[2]); var m = new Number(hms[1]); var h = new Number(hms[0]); ms -= 10; if (ms

新建一个文本文件(后缀名是TXT),然后将下面的源代码全部复制/粘贴到这个文本文件中,保存后改变这个文本文件的后缀名为HTML,然后在IE浏览器中打开并运行。

<span id="clock">00:00:11:00</span>
<input type=button value="start countdown!" onclick="onTimer()">
<input type=button value="stop countdown!" onclick="window.clearTimeout(timer);">
<script language="Javascript">
/* This notice must be untouched at all times.

countdown.js v. 1.0
The latest version is available at
http://blog.csdn.net/yjgx007

Copyright (c) 2004 Xinyi.Chen. All rights reserved.
Created 7/30/2004 by Xinyi.Chen.
Web: http://blog.csdn.net/yjgx007
E-Mail: chenxinyi1978@hotmail.com
Last modified: 7/30/2004

This program is free software;
you can redistribute it and/or modify it under the terms of the
GNU General Public License as published by the Free Software Foundation;

See the GNU General Public License
at http://www.gnu.org/copyleft/gpl.html for more details.
*/
var elapse = 100;
var start = document.all("clock").innerText;
var finish = "00:00:00:00";
var timer = null;
function onTimer(i)
{

if (start == finish)
{
window.clearTimeout(timer);
alert("time is reach!");
return;
}

var hms = new String(start).split(":");
var ms = new Number(hms[3]);
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);

ms -= 10;
if (ms < 0)
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}

if (m < 0)
{
m = 59;
h -= 1;
}
}

var ms = ms < 10 ? ("0" + ms) : ms;
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;

start = sh + ":" + sm + ":" + ss + ":" + ms;
document.all("clock").innerText = start;

timer = window.setTimeout("onTimer()",elapse);
}
</script>

考虑到onTimer函数中执行语句的延迟,实际中你可以减少elapse的值,使得倒计数秒更为精确!

分享到:
评论

相关推荐

    Javascript时间 倒数器的代码与实现

    下面我们将深入探讨如何使用JavaScript来实现一个时间倒计时器。 首先,我们需要了解JavaScript中的日期对象(Date)。`Date`对象是处理日期和时间的核心,可以用来获取当前时间,也可以创建一个指定日期和时间的对象...

    用javascript制作简单计算器.html

    学习了javascript ,这个代码是使用javascript来做一个简单的计算器,可以实现简单的额加减乘除的计算

    用JavaScript制作动画.rar

    用JavaScript制作动画.rar用JavaScript制作动画.rar用JavaScript制作动画.rar用JavaScript制作动画.rar用JavaScript制作动画.rar用JavaScript制作动画.rar

    JavaScript 动画制作教程 exe工具

    这本小册子通过制作 一个图像动画特效为主线向大家讲解JavaScript动画制作的基本技巧,分四步讲解本动画的实现:一是用Javascript制作动画-生成图象数组 、二是设置图象的位置、三是现在开始演示动画、四是用...

    html网页制作HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip

    HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zipHTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zipHTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zipHTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏....

    javascript网页特效制作

    JavaScript是Web开发中不可或缺的一部分,尤其在网页特效制作上,它的功能强大且灵活。这篇教程将深入探讨如何利用JavaScript来创建吸引人的网页特效。 首先,我们来看"Dreamweaver网页制作教程.exe",Dreamweaver...

    JavaScript网页游戏制作轻松学.pdf

    JavaScript网页游戏制作轻松学.pdf

    jQuery+css3圆形倒数秒计时器代码.zip

    综上所述,这个压缩包包含了一个结合了jQuery、CSS3和JavaScript技术的圆形倒数秒计时器,提供了丰富的视觉效果和互动体验。开发者可以通过解压文件,学习其内部结构和代码实现,以增强自己在前端开发领域的技能。

    用JavaScript制作动画

    通过深入学习和实践以上知识点,你将能够用JavaScript制作出各种富有创意和动态美感的动画效果。无论是在网站、游戏还是应用程序中,JavaScript动画都将是提升用户体验的重要手段。记得持续学习和探索,不断精进你的...

    基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip

    基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页...

    《html+css+javascript 网页制作案例教程》源代码

    《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材,旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现,提供了丰富的实践材料,使学习者能够通过实际...

    HTML+CSS+JavaScript网页制作案例教程(第2版)-教学大纲.zip

    《HTML+CSS+JavaScript网页制作案例教程(第2版)》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术,通过理论讲解和实际案例,使学习者掌握网页开发的基本流程...

    618节日个人网页制作个人网页制作个人网页制作HTML 、css 、javascript

    【618节日】说明:个人网页制作个人网页制作个人网页制作HTML 、css 、javascript (HTML 、css 、javascript HTML 、css 、javascript HTML 、css 、javascript) 文件列表: assignment\aftter Pseudo-Element .html ...

    基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip

    2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...

    Free JavaScript Editor 4.7 javascript编辑器 天涯浪子

    免费的JavaScript编辑器是用于专业编辑JavaScript代码和创建动画和其他特殊效果网页使用DOM中,使用DOM, DHTML, CSS, Ajax(异步JavaScript和XML)和JavaScript 。 AJAX技术开发人员可以很容易地使用该程序的先进的...

    JavaScript制作烟花效果

    JavaScript制作烟花效果是一种常见的网页动态特效,通过HTML5的Canvas API和JavaScript编程来实现。Canvas是HTML5的一个重要组成部分,它允许开发者在网页上绘制图形,实现动态视觉效果。在这个项目中,我们将深入...

    HTML CSS JavaScript 网页制作从入门到精通

    全书共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作,还介绍了新的HTML5和CSS3知识。为了便于读者学习,附录...

    用Javascript制作出的金字塔模型

    用Javascript制作出的金字塔模型

    JavaScript动态页面制作

    "JavaScript动态页面制作"是现代Web开发中不可或缺的一部分,它涵盖了多个关键知识点,包括DOM操作、事件处理、AJAX异步通信以及动画效果实现等。 1. DOM(Document Object Model)操作:DOM是HTML和XML文档的结构...

Global site tag (gtag.js) - Google Analytics