admin管理员组

文章数量:814259

js实现简单的倒计时功能

使用Date内置对象实现一个简单的倒计时,用户输入目标年月日,点击开始可以看到剩余时间。新手练习,欢迎大家讨论并指出错误。注意不可以输入当前时间之前的时间
效果如图

html代码如下

<!-- 倒计时 --><div class="daojishi"><h2>倒计时</h2><div class="shuru">请输入:<input type="text">年<input type="text">月<input type="text">日</div><div class="begin">开始</div><div class="shengyu">现在距离-<em>0000</em>-还剩:</div><div class="juti"><b class="on">00</b>天<b class="on">00</b>小时<b class="on">00</b>分钟<b class="on">00</b>秒</div></div>

css代码如下

.daojishi {width: 700px;height: 420px;background-color: #9e9e9e;margin: auto;}h2 {margin: auto;text-align: center;margin-bottom: 20px;font-size: 28px;}.shuru {margin: auto;text-align: center;font-size: 16px;}.begin {width: 100px;height: 100px;border-radius: 50%;text-align: center;line-height: 100px;background-color: #1e1e1e;color: white;margin: auto;font-size: 24px;cursor: pointer;margin-top: 30px;margin-bottom: 30px;}.shengyu {text-align: center;font-size: 22px;}.juti {text-align: center;font-size: 22px;margin-top: 20px;}.on {color: rgba(255, 0, 0, 0.748);}

js代码如下

// 倒计时// 获取var input = document.getElementsByTagName('input');var begin = document.getElementsByClassName('begin')[0];var em = document.getElementsByTagName('em')[0];var on = document.getElementsByClassName('on');// begin点击事件begin.onclick = function () {//定时器,一秒变一下setInterval(function(){// 获取取到的年月日 补0var year = input[0].value;year = year < 10 ? '0' + year : year;var month = input[1].value;month = month < 10 ? '0' + month : month;var date = input[2].value;date = date < 10 ? '0' + date : date;// 输入的日期赋给emem.innerText = year + '年' + month + '月' + date + '日';console.log(em);// 创建data1对象,输入的时间转换为时间戳var date1 = new Date(year + '-' + month + '-' + date);console.log(date1);var date1c = +new Date(date1);console.log(date1c);// 获取当前时间戳var date2c = +new Date();console.log(date2c);// 时间戳相减 注意要除以1000转为秒var datecc = (date1c - date2c) / 1000;// 得到的结果转换为天时分秒,注意补0var d = parseInt(datecc / 60 / 60 / 24);var h = parseInt(datecc / 60 / 60 % 24);h = h < 10 ? '0' + h : h;var m = parseInt(datecc / 60 % 60);m = m < 10 ? '0' + m : m;var s = parseInt(datecc % 60);s = s < 10 ? '0' + s : s;// 赋给结果on[0].innerText = d;on[1].innerText = h;on[2].innerText = m;on[3].innerText = s;},1000)}

本文标签: js实现简单的倒计时功能