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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
Python中的闭包总结
2014/09/18 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
详解python中的json的基本使用方法
2016/12/21 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python中加背景音乐如何操作
2020/07/19 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
文员岗位职责
2015/02/04 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android