javascript实现简单页面倒计时


Posted in Javascript onMarch 02, 2021

本文实例为大家分享了javascript实现简单页面倒计时的具体代码,供大家参考,具体内容如下

话不多说,直接贴代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style type="text/css">
  body
  {
   color:red;
   text-align: center;
  }
  .one{
   color:black;
   text-align:center;
  }
 </style>
</head>
<body>
<p>
 日期倒计时<br>
 请输入目标日期并点击按钮,实现目标日期的倒计时!
</p>
<form name="form1">
 <input type="text" id="a" size=1 name="a">年
 <input type="text" id="b" size=1 name="b">月
 <input type="text" id="c" size=1 name="c">日
 <input type="text" id="d" size=1 name="d">时
 <input type="text" id="e" size=1 name="e">分
 <input type="text" id="f" size=1 name="f">秒
 <br>

 <div id="time" value="时间"></div> 
 <script>
  function getdate(clock){
   var now=new Date();
   var y=now.getFullYear()
   var m=now.getMonth()
   var d=now.getDate()

   var day=now.getDay()
   var h=now.getHours()
   var minu=now.getMinutes()
   var s=now.getSeconds()

   m+=1;
   var array=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
   var nowtime=y+"年"+m+"月"+d+"日 "+array[day]+" "+h+"时"+minu+"分"+s+"秒";
   clock.innerHTML="当前时间:"+nowtime; 
  }
  window.onload=function(){  
  window.setInterval("getdate(time)",1000)
  }
 </script>

 <input type="button" value="倒计时" onclick="leftTime()">:
 距离目标日期还有:
 <input type="text" id="cha" >
 <script> 
 var flag=1;var t;
 function leftTime(){ 

 if(flag==0){flag=1;}

 year=document.getElementById("a").value;
 month=document.getElementById("b").value;
 day=document.getElementById("c").value;
 hour=document.getElementById("d").value;
 minute=document.getElementById("e").value;
 second=document.getElementById("f").value;

 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); 
 //计算剩余的毫秒数 
 if(leftTime>0){
 var days = parseInt(leftTime/1000/60/60/24,10); //计算剩余的天数 
 var hours = parseInt(leftTime/1000/60/60%24,10); //计算剩余的小时 
 var minutes = parseInt(leftTime/1000/60%60,10);//计算剩余的分钟 
 var seconds = parseInt(leftTime/1000%60,10);//计算剩余的秒数 
  document.getElementById("cha").value=days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
 }
 else{
  document.getElementById("cha").value="0天0小时0分0秒";
  alert("主人,时间到啦!")
  flag=0;clearInterval(t);
 }
 if(flag==1){
 t=setInterval("leftTime()",1000);
 flag=2;
 }
 } 
 </script>
</form> 
</body>
</html>

第一次写完测试的时候,发现时间到了之后页面一直不断弹出提示框,后面百度了下发现每调用一次setInterval周期性调用函数就要设置一次clearInterval来关闭,于是通过设置flag来实现;最终代码如上所示。运行结果如下:

javascript实现简单页面倒计时

时间到:

javascript实现简单页面倒计时

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
javascript实现倒计时提示框
Mar 02 #Javascript
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
JavaScript实现筛选数组
Mar 02 #Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 #Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 #Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 #Javascript
You might like
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python实现telnet客户端的方法
2015/04/15 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python实现决策树分类算法
2017/12/21 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Puppeteer使用示例详解
2019/06/20 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
文科毕业生自荐书范文
2014/04/17 职场文书
高一学生评语大全
2014/04/25 职场文书
庆元旦活动总结
2014/07/09 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang