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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
JavaScript实现简单计算器
Mar 19 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
angularjs http与后台交互的实现示例
2018/12/21 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
tensorflow更改变量的值实例
2018/07/30 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
简单了解python协程的相关知识
2019/08/31 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
工厂保洁员岗位职责
2013/12/04 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
园林资料员岗位职责
2013/12/30 职场文书
应届毕业生求职信
2014/05/26 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
怎样写工作总结啊!
2019/06/18 职场文书