位置: IT常识 - 正文

javaScript实现倒计时功能(js倒数)

编辑:rootadmin
javaScript实现倒计时功能

目录

一、主要思路

二、css样式

三、html代码

四、js内容

五、完整代码展示

六、效果展示


一、主要思路

推荐整理分享javaScript实现倒计时功能(js倒数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js foreach倒序,js倒序输出数字,js倒序排列,js倒叙输出,js倒序输出数字,js倒序,js倒叙输出,js倒置字符串,内容如对您有帮助,希望把文章链接给更多的朋友!

1.通过内置时间函数实例化日期对象获取当前时间 new Date。

2.因为时间无法减去时间,有可能生成负数,所以采用时间戳的方法得到毫秒数形式的剩余时间,然后再把剩余时间转换为天、时、分、秒格式。

3.最后把所获得的内容赋值给定义的变量。

二、css样式

主要为了内容在页面展示美观,稍微美化一下。

<style> p{ font-size: 36px; margin: 0 auto; text-align: center; line-height: 500px; } span{ color: red; } </style>三、html代码

定义一个默认格式为JavaScript引入定义变量。

<p>倒计时:<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>四、js内容

1.首先获取html里面的spans里的全部标签用querySelectorAll获取。

2.用endTime标签定义结束时间,并给结束时间赋值。

javaScript实现倒计时功能(js倒数)

3.同理,用newTine标签定义结束标签。

4.定义diffTime用来取结束时间减去现在时间获取的毫秒。

5.getTime标签主要用来将获取的时间转化为毫秒形式。

6.除以1000是提前将毫秒转化为秒。

var spans = document.querySelectorAll('span'); var endTime = new Date ('2022-10-1 12:00:00').getTime(); var newTime = new Date ().getTime(); var diffTime = (endTime-newTime)/1000;

1.定义day,hour,min,sen用来定义倒计时的天、时、分、秒。

2.parseInt用来将得到的值转化为整数形式。

3.用得到的秒/60得到多少分再/60得到多少时再/24得到多少天。

4.hour/60/60%24:用所得的时间把大数除以24取余得到还要多少小时,分,秒同理。

var day = parseInt(diffTime/60/60/24); var hour = parseInt(diffTime/60/60%24); var min = parseInt(diffTime/60%60); var sen = parseInt(diffTime%60);

将所得到的天、时、分、秒通过innerText方式给之前定义span标签赋值。

spans[0].innerText = day; spans[1].innerText = honur; spans[2].innerText = min; spans[3].innerText = sen;

最后将整个JavaScript中的内容定义一个函数中,在定时器中调用整个函数实现倒计时的效果。

showTime是我定义的函数名,1000代表1000毫米循环一次函数。

setInterval(showTime,1000)五、完整代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> p { font-size: 36px; margin: 0 auto; text-align: center; line-height: 500px; } span { color: red; } </style></head><body> <p>倒计时:<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p> <script> function showTime() { var spans = document.querySelectorAll('span'); var endTime = new Date('2022-10-1 12:00:00').getTime(); var newTime = new Date().getTime(); var diffTime = (endTime - newTime) / 1000; var day = parseInt(diffTime / 60 / 60 / 24); var honur = parseInt(diffTime / 60 / 60 % 24); var min = parseInt(diffTime / 60 % 60); var sen = parseInt(diffTime % 60); spans[0].innerText = day; spans[1].innerText = honur; spans[2].innerText = min; spans[3].innerText = sen; } setInterval(showTime, 1000) </script></body></html>六、效果展示

本文链接地址:https://www.jiuchutong.com/zhishi/299564.html 转载请保留说明!

上一篇:使用Amazon SageMaker构建高质量AI作画模型Stable Diffusion(使用灭火器时要对准火焰的什么部位喷射)

下一篇:【Vue】具名插槽(vue插槽类型)

  • 转让土地使用权营业税税率
  • 单位收到已交个税的劳务发票还需要申报个税吗
  • 废铁回收行业前景怎么样
  • 物业费按年交有优惠吗
  • 用友取消操作在哪里
  • 小规模纳税人认定标准2023
  • 一般纳税人建筑工程税率是多少
  • 普通商户怎么开小票
  • 工程项目分包需要缴纳企业所得税吗
  • 外贸企业购进货物出口后,应退消费税应当贷记
  • 7.1发票没有税号怎么开
  • 交股权印花税需要什么材料
  • 车间管理人员工作总结
  • 个贷系统平账专户还款怎么做分录
  • 年末利润分配会计处理
  • 销售净利率怎么求
  • 税务登记证遗失了怎么注销
  • 超过五年的未弥补亏损怎么处理?
  • 积极的财政政策有哪些
  • 财政拨款的贴息怎么计算
  • php curl post请求
  • Win10 20H2 Beta 预览版 19042.782正式推送(附更新内容)
  • php timestamp
  • 营业利润投资收益是借方还是贷方
  • 未开票收入怎么做账
  • PHP:pcntl_exec()的用法_PCNTL函数
  • 建筑公司结算会计
  • 租金收入计入收入总额吗
  • php安装swoole扩展
  • 拨缴经费收入进行账务处理
  • 契税计入会计利润总额吗
  • 企业会计准则对收入的定义
  • 如何解决面颊毛孔粗大
  • phpcms视频教程
  • Sqlite 操作类代码
  • wordpress防盗链
  • sql server 2005 service pack3
  • sqlserver2005数据库备份
  • 国有集体企业是国企吗
  • 甲供材料怎么记账
  • 简易计税方法的适用范围
  • 小型微利企业计算企业所得税
  • 行政单位应缴预算款原则上按月缴清
  • 先抵扣后付款怎么做账
  • 长期借款短期利息怎么算
  • 进项转出做账做什么会计
  • 费用科目入错了
  • 银行代发工资业务收费吗
  • 个人发票抬头写真名吗
  • 房屋销售预收如何交税
  • 清洁服务公司账务处理
  • 一个简单的微笑说说
  • 建立mysql
  • windows ssh-keygen
  • win8桌面图标不显示
  • 禁用windows键快捷键
  • linux编译步骤
  • window web
  • win10系统休眠唤醒屏幕变大怎么办
  • xp系统如何更改开机启动项
  • The file /boot/grub/stage1 not read cor 解决办法
  • win7旗舰版使用ie8特别卡怎么回事?
  • windows8设置自动关机
  • linux中nfs的搭建
  • linux学啥
  • win10怎么清理系统垃圾
  • win10每周更新
  • cocoscreator lua
  • node运行js文件
  • centos安装完成后桌面没有图标
  • python中的__dict__
  • unity3d脚本编程
  • unity3D利用W,A,S,D让物体移动
  • 优化ui界面是啥意思
  • Unity KillCount
  • python怎么写多行
  • android studio ndk开发教程
  • js实现省份和市级联动
  • 安卓 存储权限 访问的地方是哪里
  • 苏州社保代缴机构查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设