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倒数计时器是一种常见的Web开发功能,用于显示从特定日期或时间点开始的剩余时间。在这个场景中,我们有一个已经完成并带有详细注释的倒数计时器代码,它只显示小时、分钟和秒,去掉了天数的显示。我们将...
JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例
本文将深入探讨JavaScript客户端验证和页面特效制作的核心知识点。 **一、JavaScript客户端验证** 客户端验证是在用户提交表单之前,通过JavaScript在用户浏览器端进行的数据检查。这有助于提高用户体验,减少...
用javascript编程语言编写的简易计算器,仅包含+-*/运算
在这个"JavaScript制作的几个简单网页"项目中,我们可以深入学习JavaScript的基础知识以及如何在实际应用中使用它。 首先,JavaScript的基本语法是学习的重点。包括变量声明(var、let、const)、数据类型(如字符...
JavaScript是一种强大的客户端脚本语言,广泛应用于网页和网络应用开发,包括制作各种动态效果和交互式的用户界面。在本文中,我们将深入探讨如何利用JavaScript来创建动画,让您的网页动起来。 一、基础概念 在...
js 倒数计时器 counttimedown javascript 写的时间倒数计时器
本篇将详细介绍如何利用CSS3和JavaScript实现一款简洁、美观的圆形进度条时分秒计时器。 首先,我们需要理解CSS3的特性。CSS3引入了许多新的选择器、属性和动画效果,使得网页设计更加丰富和动态。其中,圆角边框...
这本小册子通过制作 一个图像动画特效为主线向大家讲解JavaScript动画制作的基本技巧,分四步讲解本动画的实现:一是用Javascript制作动画-生成图象数组 、二是设置图象的位置、三是现在开始演示动画、四是用...
最后,源代码中可能包含了一些实际的网页项目,比如计时器、动态图表、下拉菜单、图片轮播等,这些都是JavaScript在网页制作中常见且实用的应用。通过阅读和分析这些代码,读者可以加深对JavaScript实际运用的理解,...
HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zipHTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zipHTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zipHTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏....
用JavaScript制作动画
综上所述,这个压缩包包含了一个结合了jQuery、CSS3和JavaScript技术的圆形倒数秒计时器,提供了丰富的视觉效果和互动体验。开发者可以通过解压文件,学习其内部结构和代码实现,以增强自己在前端开发领域的技能。
JavaScript客户端验证和页面特效制作(JavaScript)第一章
JavaScript网页游戏制作轻松学.pdf
基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页...
javascript招聘网站制作 javascript 招聘网站javascript招聘网站制作 javascript 招聘网站javascript招聘网站制作 javascript 招聘网站javascript招聘网站制作 javascript 招聘网站
《HTML+CSS+JavaScript网页制作案例教程(第2版)》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术,通过理论讲解和实际案例,使学习者掌握网页开发的基本流程...
这是一个用html+css+javascript做的焦点图,在网页制作中,要经常用到的!
巧学巧用HTML、CSS、Javascript制作网页 part2