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 相关文章推荐
我的Node.js学习之路(一)
Jul 06 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
详解JavaScript常量定义
Jan 03 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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 模板高级篇总结
2006/12/21 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
ReactNative列表ListView的用法
2017/08/02 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python中Django 后台自定义表单控件
2017/03/28 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python爬虫基本知识
2018/03/05 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
导游个人求职信
2014/04/25 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
社区平安建设方案
2014/05/25 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL