分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

js实现倒计时

发布时间:2023-09-06 02:17责任编辑:熊小新关键词:js

实现要点:

  1. 思路:抢购时间 - 现在时间,用 getTime() 得到时间【单位为毫秒】,再转换为标准时间 

  2.    用 setInterval() 方法来实现倒计时,当时间为0时,清除计时器

  3. 设置按钮的属性为禁用,时间到了清除 disabled 属性

  4. 将时间通过 innerHTML 属性显示在p标签上

  5. 实际项目中,计时器的抢购时间必须以服务器上为准

代码:

<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????#test{width:100px;height:30px;margin:0;padding:0;border-radius:8px;} ???</style></head><body> ???<p>倒计时秒杀活动</p> ???<p id="time"></p> ???<button id="test" disabled="disabled">开始抢购</button> ???<script> ???????function doClick(){ ???????????alert(‘恭喜你抢购成功‘); ???????} ???????function doTime(date){ ???????????var btn = document.getElementById(‘test‘); ???????????var p = document.getElementsByTagName(‘p‘)[1]; ???????????var endTime = new Date(date); ???????????var nowTime = new Date(); ???????????var leftTime = endTime.getTime() - nowTime.getTime(); ??//得到的是毫秒 ???????????var day,hour,minute,second = 0; ???????????if(leftTime > 0){ ???????????????day = Math.floor(leftTime/1000/60/60/24); ???????????????hour = Math.floor(leftTime/1000/60/60%24); ???????????????minute = Math.floor(leftTime/1000/60%60); ???????????????second = Math.floor(leftTime/1000%60); ???????????????p.innerHTML = ?hour + "时" + minute + "分" + second + "秒"; ???????????}else{ ???????????????clearInterval(t); ???//清除定时计 ???????????????btn.removeAttribute(‘disabled‘); ??????????????????btn.setAttribute(‘style‘,‘background-color: red;color: white‘); ?????????????????btn.setAttribute(‘onclick‘,‘doClick()‘); ???????????} ???????} ???????var t = setInterval(function(){ ???????????doTime(‘2018/10/4 13:00:00‘); ???//此处设置的是抢购时间,以服务器为准 ???????},0); ???</script></body></html>

js实现倒计时

原文地址:https://www.cnblogs.com/whs5280/p/9742029.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved