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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
elementUI多选框反选的实现代码
2019/04/03 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
2014年征兵标语
2014/06/20 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
mysql left join快速转inner join的过程
2021/06/30 MySQL