JavaScript实现的计时器和倒计时器

最新推荐文章于 2022-01-24 09:41:57 发布
最新推荐文章于 2022-01-24 09:41:57 发布
阅读量1.4k 收藏
点赞数
分类专栏： C#学习 文章标签： javascript input button function timer action

本文编写了一个javascript实现的计时器和倒计时器。

1.计时器的范例代码
<html>
<head>
<title>计时器的范例</title>
<script language="javascript">
<!--
var CallTimeLen = "0";
var timer1 = null;

function DoCallTimer()
{  
  var minute="0";
     var second="0";
  CallTimeLen = parseInt(CallTimeLen)+1;
  minute = parseInt(CallTimeLen/60);
  second = CallTimeLen%60;
  if(minute=="0")
  {
   document.frmtimer.thzt.innerText ="您已通话:"+second+"秒";
  }
  else
  {
   document.frmtimer.thzt.innerText ="您已通话:"+minute+"分"+second+"秒";
  }
  window.timer1 = window.setTimeout("DoCallTimer()",1000);
}
function stop()
{
 clearTimeout(window.timer1);
}
-->
</script>
</head>
<body>
<form name="frmtimer" action="" method="post">
<hr>
<input type="text" name="thzt" id="thzt">
<br>
<input type="button" value="开始计时" name="start" onClick="DoCallTimer()">
<input type="button" value="停止" name="stop" onClick="clearTimeout(window.timer1);">
<hr>
</form>
</body>
</html>

2.倒计时器的范例代码
<html>
<head>
<title>计时器的范例</title>
<script language="javascript">
<!--
var CallTimeLen = "0";
var begintime;
var timer = null;

function DoConverseCallTimer()
{
 //alert(document.frmtimer.thzt.value);
 if(document.frmtimer.thzt.value == "")
  alert("请输入倒计时开始的秒数！");
 else
 {
  document.frmtimer.conversestart.disabled=true;
  var minute="0";
     var second="0";
  begintime = parseInt(begintime)-1;
  minute = parseInt(begintime/60);
  second = begintime%60;
  if(minute=="0")
  {
   document.frmtimer.thzt.innerText ="您剩余的时间为:"+second+"秒";
  }
  else
  {
   document.frmtimer.thzt.innerText ="您剩余的时间为:"+minute+"分"+second+"秒";
  }
  timer1 = window.setTimeout("DoConverseCallTimer()",1000);
 }
}

function setBegintime()
{
 document.frmtimer.conversestart.disabled=false;
 begintime = document.frmtimer.thzt.value;
}
-->
</script>
</head>
<body>
<form name="frmtimer" action="" method="post">
<hr>
<input type="text" name="thzt" id="thzt" onKeyup="value=value.replace(/[^/d]/g,'');setBegintime()">
<br>
<input type="button" value="开始倒计时" name="conversestart" onClick="DoConverseCallTimer()">
<input type="button" value="停止" name="stop" onClick="clearTimeout(window.timer1);">
<hr>
</form>
</body>
</html>

 



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=210854

 
qinchende
关注
专栏目录
javascript实现计时器
01-05
js实现计时器，只需要将设定的开始时间修改为你需要的开始时间就可以使用，制作个人网站，纪念重要日期非常实用。
JavaScript分秒倒计时器实现方法
12-09
JavaScript 分秒倒计时器是一种常见的时间管理工具，它能够以分钟和秒钟为单位显示从当前时间开始到设定结束时间的剩余时间，并在到达设定时间后执行特定操作，如禁用按钮。以下是对如何实现这样一个倒计时器的详细...
Javascript技巧之计时器和倒计时器
技术无疆
12-09 3566
本文编写了一个javascript实现的计时器和倒计时器。1.计时器的范例代码计时器的范例var CallTimeLen = "0";var timer1 = null;function DoCallTimer(){    var minute="0";     var second="0";  CallTimeLen = parseInt(CallTimeLen)+1;  minute
【JavaScript】分秒倒计时器
编程记录，亲测有效
11-19 3140
一、基本目标 在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态 具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表， 真正使用的时候，把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可。 在时间用完之前，按钮还是可以点击的。 时间用完之
JavaScript 计时器,倒计时
路虽远行则将至，事虽难做则必成
03-27 682
先看效果 //列表的的效果 //单个效果 var bjtimer={ sysTime:0, //服务器时间毫秒数 timeBodyName:"timecontainer", //显示时间的容器 timeBodyTag:"div", showFmt:"dd天HH时mm分ss秒", notstartMsg:"即将开始:", starti
js 倒数计时器
qq_43172476的博客
08-24 1085
JS 倒数计时器方法一（setTimeout)方法二（setInterval） 方法一（setTimeout) //根据id获取内容 var number = document.getElementById("number") setTimeout(function(){ number.innerText = 3; setTimeout(function(){ number.innerText = 2; setTimeout(function(){ number.in
JavaScript计时器示例分析
10-24
在实践中，一次性计时器和间隔性触发计时器的使用场景十分广泛，例如可以用于控制动画的播放、定时刷新页面数据、实现倒计时功能等。通过具体的代码示例，我们可以更加深刻地理解这些计时器的使用方法和作用。 例如...
JavaScript实现网页跨年倒计时
01-18
JavaScript网页–跨年倒计时，供大家参考，具体内容如下 最近学弟在追一个学妹，我在帮学弟出谋划策。 学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再...
JavaScript倒计时
weixin_33976072的博客
02-28 252
<h3 id="countDate"></h3> <script> function countTime(targetDate) { // 获取当前时间对象 var now = new Date() // 将目标时间字符串 格式化成 目标时间对象 var target = new Date(targe...
js实现倒计时器
qq_45147812的博客
06-17 1228
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="time_back"> <span>0</span> <span>0</span> <span>:</span
javascript显示倒计时控制按钮的简单实现
11-24
html： <a><span id=”sendAgain” xss=removed>2.再次发送激活邮件</span></a> （span控制点击事件，disabled无效） js： /*发送邮件*/ function sendEmail(){//发送邮箱认证邮件 var me = $("#sendAgain"); me.time = 60; (function() { if (me.time > 1) { me.time--; me.html("2.再次发送还需(" + me.time + ")"); setTim
Javascript倒计时（定时）执行跳转事件的代码
10-28
Javascript倒计时（定时）执行跳转事件的代码，需要的朋友可以参考下
js实现倒计时器自定义时间和暂停
10-17
主要为大家详细介绍了js实现倒计时器自定义时间和暂停，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
timer:简单轻量级的 javascript 计时器
07-01
计时器 简单轻量级的 javascript 计时器 开始 在需要的地方包含 timer.min.js。 创建一个定时器实例： timer = new Timer ( < callback> , < instance> ); 调用 timer.start(duration) 函数。 每隔几秒，就会调用 instance.callback，参数中带有一个布尔值，指示计时器是否已结束。 用法 timer.start(duration)启动计时器 'duration' 秒 timer.togglePause()暂停或恢复计时器 timer.stop()停止计时器 timer.remaining()给出剩余秒数 timer.elapsed()给出经过的秒数 版权 来源在 MIT 许可下
javascript倒计时
莫不静好
07-18 243
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <button id="btn"&gt...
在JavaScript中建立倒数计时器
08-14 391
Countdown timers can serve many purposes. They can communicate to a user how long they’ve been doing something or how much time until some event happens, like the launch of your new website. 倒数计时器可以...
js 倒计时（计时器）
青蛙king的博客
09-15 164
1、验证码倒计时 // 倒计时 var t = this.loginForm.countDown; var timer = setInterval(() => { if (t > 1) { t--; this.loginForm.countDown = t; } else { this.loginForm.isClickyzCode = false; this.loginForm.showTimer = true
JavaScript 实现倒计时
坚持学习
02-03 843
代码如下 var millisecond; var sI; function initDate() { var endTime = new Date("2015/02/05 16:23:50"); var startTime = new Date("2015/02/05 16:23:30");
用JavaScript写出倒计时器
weixin_63699342的博客
01-24 794
天气寒冷，小手冰凉，又到了写周记的时间了，这周学习的好几个有趣的算法和随机数点名还有倒计时如何制作。 function lastTime() { // var now = +new Date(); var time = new Date(); var now = time.valueOf(); //获取从1970年1月1号开始到现在的总毫秒数 var target = +new Date('2022-1-24 7:30:00'); //目标时间到1970年1月1号的总毫秒数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值