实现倒计时的小案例
- 只显示倒计时
<!DOCTYPE HTML> <html> <head> <title>实现倒计时</title> </head> <body> <div id="timer" style="color:red; font-weight:bold;">倒计时马上开始……</div> <script type="text/javascript"> // 倒计时总时间，以秒为单位 var totalTime = 310 * 1; function CountDown() { if (totalTime >= 0) { seconds = Math.floor(totalTime % 60); // 秒 minutes = Math.floor(totalTime / 60 % 60); // 分 hour = Math.floor(totalTime / 60 / 60 % 24); // 时 day = Math.floor(totalTime / 60 / 60 / 24); // 天 // 用变量保存要显示的所有内容 timerMsg = "距离活动结束还有：" + (day >= 10 ? day : "0" + day) + "天" + (hour >= 10 ? hour : "0" + hour) + "时" + (minutes >= 10 ? minutes : "0" + minutes) + "分" + (seconds >= 10 ? seconds : "0" + seconds) + "秒"; // 替换掉页面内容 document.all["timer"].innerHTML = timerMsg; // 友情提示 totalTime == 5 * 60 && alert('注意，还有5分钟!'); --totalTime; } else { clearInterval(timer); // 停止调用函数 alert("时间到，计时结束!"); } } timer = setInterval("CountDown()", 1000); // 以毫秒为单位，每 1 秒调用一次 CountDown() // window.onload = CountDown; // 页面刚加载完就开始计时 </script> </body> </html>效果图
- 显示输入的未来时间，确定后并开始倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>时间倒计时</title> <style> input { width: 50px; height: 20px; border: 1px solid black; background-color: red; text-align: center } .time1 span { display: inline-block; width: 40px; height: 20px; text-align: center } </style> </head> <body> <form>目的日期： <input type="text" id="year"><span>年</span> <input type="text" id="month"><span>月</span> <input type="text" id="day"><span>日</span> <input type="text" id="hour"><span>时</span> <input type="text" id="minute"><span>分</span> <input type="text" id="second"><span>秒</span> <input type="button" value="确定" onclick="show()"> </form> <div class="time1">还剩时间： <span id="1"></span>天 <span id="2"></span>时 <span id="3"></span>分 <span id="4"></span>秒 </div> <script> function show() { //获取目的日期 var myyear = document.getElementById("year").value; //年 var mymonth = document.getElementById("month").value - 1; // 月 var myday = document.getElementById("day").value; // 日 var myhour = document.getElementById("hour").value; //时 var myminute = document.getElementById("minute").value; //分 var mysecond = document.getElementById("second").value; //秒 // 记录输入的时间 var time = Number(new Date(myyear, mymonth, myday, myhour, myminute, mysecond)); // var time = new Date(myyear, mymonth, myday, myhour, myminute, mysecond).getTime(); //获取当前时间 var nowTime = Date.now(); // var nowTime=new Date().getTime(); //获取时间差 var timediff = Math.round((time - nowTime) / 1000); //获取还剩多少天 var day = parseInt(timediff / 3600 / 24); //获取还剩多少小时 var hour = parseInt(timediff / 3600 % 24); //获取还剩多少分钟 var minute = parseInt(timediff / 60 % 60); //获取还剩多少秒 var second = timediff % 60; //输出还剩多少时间 day >= 0 ? document.getElementById("1").innerHTML = day : 0; hour >= 0 ? document.getElementById("2").innerHTML = hour : 0; minute >= 0 ? document.getElementById("3").innerHTML = minute : 0; second >= 0 ? document.getElementById("4").innerHTML = second : 0; var cle = setTimeout(show, 1000); //计时器 timediff == 0 && clearInterval(cle) } </script> </body> </html>效果图：
3.日历计算器，显示日历实现一天的倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现日历倒计时</title> <style> .calendar { width: 300px; height: 360px; margin: 100px auto; background-color: #59ACFF; text-align: center; color: #C1DBF5; } .calendar p { color: #ffffff; font: 400 18px/80px "微软雅黑"; } #nowdate { display: block; height: 100px; width: 100px; background-color: #FF9600; text-align: center; margin: 0 auto; font: 700 60px/100px "微软雅黑"; color: #ffffff; } .calendar strong { margin: 20px auto; padding: 5px; display: block; width: 250px; height: 40px; color: #ffffff; font: 500 20px/26px "微软雅黑"; border-top: dashed 1px #ffffff; } #time { color: #ffffff; font: 500 20px/40px "微软雅黑"; } </style> </head> <body> <div class="calendar"> <p id="fulldate"></p> <span id="nowdate"></span> <strong id="hllo"></strong> <span>----- 今天的余额 -----</span> <div id="time"></div> </div> <script> window.onload = function () { //获取DOM元素 var fulldate = document.getElementById("fulldate"); var nowdate = document.getElementById("nowdate"); var time = document.getElementById("time"); var hllo = document.getElementById("hllo"); //获取现在的年月日小时 var fullTime = new Date(); var year = fullTime.getFullYear(); //年 var month = fullTime.getMonth(); //月 var date = fullTime.getDate(); //日 var hours = fullTime.getHours(); //小时 var dayArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; //设置页面年月日 fulldate.innerHTML = year + " 年 " + (month + 1) + " 月 " + date + " 日 " + >dayArr[fullTime.getDay()]; //设置当前日 nowdate.innerHTML = date; //名言数组 var hlloarr = [ "只有登上山顶，才能看到那边的风光", "山路曲折盘旋，但毕竟朝着顶峰延伸", "勤奋是你生命的密码，能译出你一部壮丽的史诗", "左右一个人成功的，不是能力，而是选择", "我们这个世界，从不会给一个伤心的落伍者颁发奖牌", "没有天生的信心，只有不断培养的信心", "每一发奋努力的背后，必有加倍的赏赐", "不要等待机会，而要创造机会", "含泪播种的人一定能含笑收获", "让信念坚持下去，梦想就会实现", "不要给自己的失败找借口", "要学会新东西，要不断进步，就必须放低自己的姿势" ]; hllo.innerHTML = hlloarr[parseInt(hours / 2)]; //当前时间段默认的名言 var endTime = new Date(year, month, date, 23, 59, 59); //获取未来结束的时间 setInterval(fun, 1000); //开启定时器 function fun() { var newTime = new Date(); //得到最新的时间 var ms = parseInt((endTime - newTime) / 1000); //得到毫秒，并取整 var s = parseInt(ms % 60); //秒 var m = parseInt((ms / 60) % 60); //分 var h = parseInt((ms / 3600) % 24); //小时 // var d = parseInt((ms / 3600) / 24); //天 s < 10 ? s = "0" + s : s; m < 10 ? m = "0" + m : m; h < 10 ? h = "0" + h : h; // d < 10 ? d = "0" + d : d; time.innerHTML = h + " 时 " + m + " 分 " + s + " 秒 "; if (s == 0) { // 每60秒切换一次名言 hllo.innerHTML = hlloarr[parseInt(m % 12)]; } } } </script> </body> </html>效果图
跟网上看到样式，手痒然后就动手做了做，自己记录一下，留个回忆
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
