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 Ajax之load()方法
Oct 12 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jquery移动节点实例
Jan 14 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
vue.js的提示组件
Mar 02 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
深入array multisort排序原理的详解
2013/06/18 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
解读ES6中class关键字
2017/11/20 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
银行行长竞聘演讲稿
2014/04/23 职场文书
2014国庆节标语口号
2014/09/19 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
演讲开场白和结束语
2015/05/29 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书