分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

原生js处理倒计时小实例

发布时间:2023-09-06 01:33责任编辑:胡小海关键词:js

昨天写了一个简单的不能循环走的倒计时,那么今天写一个添加了定时器之后的倒计时。先来看看布局的代码:

<style>.t1 { width:400px; }</style><body>  距离:<input class="t1" type="text" value="November 27,2013 22:3:0" /><br />  还剩:<input class="t1" type="text" />  <input type="button" value="开始倒计时吧" /></body>

js代码如下:

<script> ???????????????window.onload = function () { ???????????var aInp = document.getElementsByTagName(‘input‘); ???????????var iNow = null; ???????????var iNew = null; ???????????var t = 0; ???????????var str = ‘‘; ???????????var timer = null; ???????????aInp[2].onclick = function () { ???????????????iNew = new Date(aInp[0].value); ???????????????clearInterval( timer ); ???????????????timer = setInterval (function (){ ???????????????????iNow = new Date(); ???????????????????t = Math.floor( ( iNew - iNow ) / 1000 ); ???????????????????if ( t >= 0 ) {//这个时间差要么大于或者等于0,不可能为负值 ???????????????????????str = Math.floor(t/86400)+‘天‘+Math.floor(t%86400/3600)+‘时‘+Math.floor(t%86400%3600/60)+‘分‘+t%60+‘秒‘; ???????????????????????aInp[1].value = str; ???????????????????} else { ???????????????????????clearInterval( timer ); ???????????????????} ???????????????}, 1000); ???????????}; ???????}; ???</script>

当然我截的是静态图,效果就是倒计时时间会在input里显示出来,需要注意的就是要这个时间差不可能为负数,所以,一定要做判断!

好了,今天就到这里了!

原生js处理倒计时小实例

原文地址:https://www.cnblogs.com/web001/p/8179086.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved