Javascript实现时间倒计时功能
本文实例为大家分享了js实现时间倒计时的具体代码，供大家参考，具体内容如下
这里使用的是Date日期类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期类倒计时</title>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("time");
var obtn=document.getElementById("btn");
var omusic=document.getElementById("music");
obtn.onclick=function(){//按钮点击 音乐停止播放
omusic.pause();
}
function totwo(e){
return e<10?"0"+e:""+e;//如果取得的数字为个数则在其前面增添一个0
}
function go(){//把获取时间的功能封装到函数内 注意 时间要向下取整避免小数
var time1=new Date();//获取当前时间 获取的市1970年1年1月日到现在的毫秒数(必须写在函数或者定时器内 每一次变化都要重新获取当前时间)
var time2=new Date(2017,9,27,17,20,10);//设置需要到达的时间 也是获取的毫秒数
var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//获得差值除以1000转为秒
var day=totwo(Math.floor(conS/86400));// 差值/60/60/24获取天数
var hour=totwo(Math.floor(conS%86400/3600)); // 取余/60/60获取时(取余是获取conS对应位置的小数位)
var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60获取分
var s=totwo(Math.floor(conS%60)); //取总秒数的余数
var html="倒计时"+day+"天"+hour+"时"+min+"分"+s+"秒";
odiv.innerHTML=html;//把字符串添加进div中
if(conS<0){//倒计时完成 执行功能，这里是播放MP3
clearInterval(time);//执行功能时要清除时间函数
omusic.play();
odiv.innerHTML="春节快乐！";
}
}
go();//调用函数
var time=setInterval(go,1000);//设置定时器 每一秒执行一次
}
</script>
</head>
<body>
<button id="btn">停止</button>
<audio src="music.mp3" id="music"></audio>
<div id="time"></div>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS 倒计时实现代码(时、分，秒)
JS实现倒计时(时.分,秒) var interval = 1000; function ShowCountDown(year,month,day,divname) { var now = new Date(); var endDate = new Date(year, month-1, day); var leftTime=endDate.getTime()-now.getTime(); var leftsecond = parseInt(leftTime/1000); //var day1=
-
2种简单的js倒计时方式
一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times > 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (
-
JavaScript实现新年倒计时效果
本文实例为大家分享了js实现新年倒计时展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新年倒计时</title> <link rel="stylesheet" hr
-
JS实现倒计时图文效果
本文实例为大家分享了JS实现倒计时图文效果的具体代码,供大家参考,具体内容如下 <body> <img src="images/0.png" alt="" id="h1"> <img src="images/0.png" alt="" id="h2"> <img src="images/second1.png" alt=&qu
-
Javascript实现秒表倒计时功能
本文实例为大家分享了js实现秒表倒计时的具体代码,供大家参考,具体内容如下 效果图: 代码: <html> <body> <span id="clock" style="font-size: 3em">00:30:00:00</span> <script type="text/javascript"> var oclock=document.getElementById("cl
-
js代码实现点击按钮出现60秒倒计时
比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
-
简单易用的倒计时js代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20
-
javaScript实现游戏倒计时功能
本文实例为大家分享了js实现游戏倒计时的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8" /> <title></title> <style> button:hover { cursor: pointer; } </style> <script> //1.获取游戏的总时间 //2.游戏开始的时间 //3.游戏进行时 //4. 游戏进行
-
js几秒以后倒计时跳转示例
复制代码 代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type=
-
JS实现倒计时(天数、时、分、秒)
本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下 注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1