js倒计时简单实现代码

2024-07-28 13:31:19

倒计时：

1.设置一个有效的结束日期

2.计算剩余时间

3.将时间转换成可用的格式

4.输出时钟数据作为一个可重用的对象

5.在页面上显示时钟，并在它到达0时停止

html

<div id="clock">
  <span id="days"></span>天
  <span id="hours"></span>时

  <span id="minutes"></span>分

  <span id="seconds"></span>秒

</div>

js代码

<script><br>/*计算剩余时间*/
  function getTimeReamin(endtime){
   //剩余的秒数
    var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000;
    var days=Math.floor(remainSec/(3600*24));
    var hours=Math.floor(remainSec/3600%24);
    var minutes=Math.floor(remainSec/60%60);
    var seconds=Math.floor(remainSec%60);
    return{"remainSec":remainSec,
     "days":days,
     "hours":hours,
     "minutes":minutes,
     "seconds":seconds
    }
  }
var endtime="2016/10/10";
var clock=document.getElementById("clock");
//设置定时器
var timeid=setInterval(function () {
  var t=getTimeReamin(endtime);
  //判断时间格式
  days= t.days>=0&& t.days<10?"0"+t.days:t.days;
  hours= t.hours>=0&& t.hours<10?"0"+t.hours:t.hours;
  minutes=t.minutes>=0&&t.minutes<10?"0"+t.minutes:t.minutes;
  seconds=t.seconds>=0&&t.seconds<10?"0"+t.seconds:t.seconds;
  //设置时间
  document.getElementById("days").innerText= days;
  document.getElementById("hours").innerText= hours;
  document.getElementById("minutes").innerText= minutes;
  document.getElementById("seconds").innerText=seconds;
　　//清除定时器
  if(t.remainSec<=0){
    clearInterval(timeid);
  }
});
<script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS/jQ实现免费获取手机验证码倒计时效果

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面
php倒计时出现-0情况的解决方法

本文实例讲述了php倒计时出现-0情况的解决方法.分享给大家供大家参考,具体如下: 问题:今天有反馈,说倒计时出现了-0天的情况,我看了看程序,卧槽,当时怎么没测试到原因是PHP的逻辑判断中 -0 > 0 分析:贴出错的代码 $starttime = 1362585600; //3.7凌晨 $nowtime = 1362618921;//3.7早上 $off = ceil(($starttime - $nowtime)/86400); //倒计时 if ($off < 0) { $off =
js实现浏览器倒计时跳转页面效果

本文实例为大家分享了js浏览器倒计时跳转页面效果,供大家参考,具体内容如下效果图: <!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta http-equiv="Content-Type" content="text/html; charset=gb123"/> </head> <body> <H4>
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

时钟最简单的时钟制作办法是通过正则表达式的exec()方法,将时间对象的字符串中的时间部分截取出来,使用定时器刷新即可 <div id="myDiv"></div> <script> myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new
点击按钮出现60秒倒计时的简单js代码(推荐)

点击按钮出现60秒倒计时的简单js代码(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h
javascript显示倒计时控制按钮的简单实现

html: <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a> (span控制点击事件,disabled无效) js: /*发送邮件*/ function sendEmail(){//发送邮箱认证邮件 var me = $("#sendAgain"); me.time = 60; (function() { if (
js实现精确到秒的倒计时效果

本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下效果图: 1.倒计时效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>倒计时</title> <link rel="stylesheet" href="css/common.css" type="text/css&quo
js倒计时简单实现代码

倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 html <div id="clock"> <span id="days"></span>天 <span id="hours"></span>时 <span id="minutes"></
js倒计时简单实现方法

本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下: function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 * 30) { month = Math.floor(second / (86400 * 30)) + '月'; second = second % (86400 * 30); } if (second >= 86400)
利用js实现简单开关灯代码

body部分: <button>开关灯</button> script部分: <script> // window.onload 是窗口加载事件,可以实现将代码写到元素上面 window.addEventListener('load', function () { var btn = document.querySelector('button'); // 定义一个变量,用来判断灯的开关情况 var flag = 0; btn.onclick = function ()
简单实现js倒计时功能

本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title> 倒计时 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=
原生JS实现简单的倒计时功能示例

本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
js实现简单的倒计时

本文实例为大家分享了js实现简单倒计时的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
简单实现JS倒计时效果

本文实例为大家分享了JS倒计时效果的具体代码,供大家参考,具体内容如下 Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <script> function toTwo(n) { if(n>9) { return ''+n; } else { return '0'+n; } }
js动画(animate)简单引擎代码示例

用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内
js判断主流浏览器类型和版本号的简单实现代码

如今的互联网中,浏览器可以说是太多太多了,但是大部分都是换壳不换心,基本上主流的浏览器还是火狐,谷歌,IE,safrai这几种比较常见,所以在我们的开发中,有时候需要遇到判断用户正在使用什么浏览器以及使用的版本是多少,并根据返回值,给予一定的提示,下面,我就简单的介绍一种判断用户浏览器的使用情况的代码. var distinguishBrowser= function browserInfo() { var browser = { // IE浏览器 msie: false, // 谷歌浏览器 c
简单的JS轮播图代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

js倒计时简单实现代码

相关推荐

随机推荐