位置: 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插槽类型)

  • 魅族18spro支持无线充电吗(魅族18spro支持无线充?)

    魅族18spro支持无线充电吗(魅族18spro支持无线充?)

  • word没有内容怎么弄下划线(word文档不见了怎么办)

    word没有内容怎么弄下划线(word文档不见了怎么办)

  • QQ照片回收站在哪(qq照片回收站在哪最新)

    QQ照片回收站在哪(qq照片回收站在哪最新)

  • 拼多多买了东西不显示(拼多多买了东西不想要了如何退回)

    拼多多买了东西不显示(拼多多买了东西不想要了如何退回)

  • 苹果日历没有显示节假日怎么设置(苹果日历没有显示生日)

    苹果日历没有显示节假日怎么设置(苹果日历没有显示生日)

  • 4ghd怎么关闭(4ghd怎么关闭vivo手机)

    4ghd怎么关闭(4ghd怎么关闭vivo手机)

  • 微信怎样设置红包提醒(微信怎样设置红包到账时间)

    微信怎样设置红包提醒(微信怎样设置红包到账时间)

  • 华为nova5分屏功能怎么使用(华为nova5z分屏)

    华为nova5分屏功能怎么使用(华为nova5z分屏)

  • 水星路由器恢复出厂设置后怎么办(水星路由器恢复出厂设置后怎么设置密码)

    水星路由器恢复出厂设置后怎么办(水星路由器恢复出厂设置后怎么设置密码)

  • 90赫兹手机有哪些(90赫兹手机有哪些型号)

    90赫兹手机有哪些(90赫兹手机有哪些型号)

  • 夏普遥控器闪蓝光不能用(夏普遥控器闪蓝光怎么办)

    夏普遥控器闪蓝光不能用(夏普遥控器闪蓝光怎么办)

  • 扣扣拉黑后对方知道吗(扣扣拉黑后对方发信息显示什么)

    扣扣拉黑后对方知道吗(扣扣拉黑后对方发信息显示什么)

  • 抖音号可以修改几次(抖音号可以修改成手机号码吗)

    抖音号可以修改几次(抖音号可以修改成手机号码吗)

  • 微信提醒谁看删除还有提醒吗(微信提醒谁看删除了别人)

    微信提醒谁看删除还有提醒吗(微信提醒谁看删除了别人)

  • 计算机的运算器主要功能是(计算机的运算器控制器及内存储器统称为)

    计算机的运算器主要功能是(计算机的运算器控制器及内存储器统称为)

  • 小米8青春版有闪充吗(小米8青春版有红外线遥控功能吗)

    小米8青春版有闪充吗(小米8青春版有红外线遥控功能吗)

  • 苹果7和8壳是不是通用(苹果7和苹果8壳子通用吗)

    苹果7和8壳是不是通用(苹果7和苹果8壳子通用吗)

  • 电脑主板坏了里面的文件还在吗(电脑主板坏了里面的文件怎么办)

    电脑主板坏了里面的文件还在吗(电脑主板坏了里面的文件怎么办)

  • 频幕出现月亮怎么消除(屏上出现月亮图怎么办)

    频幕出现月亮怎么消除(屏上出现月亮图怎么办)

  • mate30有5g功能吗(华为mate30有没有5g版本)

    mate30有5g功能吗(华为mate30有没有5g版本)

  • 苹果手机怎么截长屏(苹果手机怎么截长屏 教程)

    苹果手机怎么截长屏(苹果手机怎么截长屏 教程)

  • 抖音粉丝列表怎么排序(抖音粉丝列表怎么隐藏个别粉丝)

    抖音粉丝列表怎么排序(抖音粉丝列表怎么隐藏个别粉丝)

  • 苹果8plus参数(苹果8plus参数配置处理器)

    苹果8plus参数(苹果8plus参数配置处理器)

  • 街电押金99元怎么退了(街电押金99元怎么一直退不回)

    街电押金99元怎么退了(街电押金99元怎么一直退不回)

  • xbox国行有必要解锁吗(xbox国行有必要买金会员吗)

    xbox国行有必要解锁吗(xbox国行有必要买金会员吗)

  • 苹果系统怎么玩安卓区(苹果系统怎么玩皮卡堂)

    苹果系统怎么玩安卓区(苹果系统怎么玩皮卡堂)

  • 修改插入点闪烁光标的宽度

    修改插入点闪烁光标的宽度

  • AI - stable-diffusion(AI绘画)的搭建与使用

    AI - stable-diffusion(AI绘画)的搭建与使用

  • python函数接收不同类型的参数(python语言接收信息的内置函数)

    python函数接收不同类型的参数(python语言接收信息的内置函数)

  • 小规模纳税人劳务派遣差额征税税率
  • 增值税进项发票网上勾选平台
  • 商家发票可以随便开金额吗
  • 应收账款核销的会计处理
  • 二季度资产总额怎么计算
  • 累计折旧和固定资产减值准备的区别
  • 累计所得税前净现金流量计算公式为
  • 筹建期间有收入怎么办
  • 企业分立特殊性税务处理涉税
  • 土地出让金进项税税率
  • 滞销款的最好销售办法
  • 地税发票联丢失要补救报帐有何办法?
  • 应交税金成负数
  • 补缴企业所得税滞纳金账务处理
  • 存货自然灾害损失进项税
  • 转账支票签章如何盖及相关注意事项
  • 哪些单位可以开专票
  • 快消品应收账款风险策划方案
  • 一般纳税人的增值税应纳税额等于
  • 无偿赠与钱要交税吗
  • 商贸企业仓储服务有哪些
  • 小规模减半征收印花税的政策
  • 小规模纳税人增值税超过30万怎么纳税
  • 个人交汽车购置税流程
  • 业务招待费不超过销售收入的5‰
  • 购买固定资产算投资吗
  • 支付临时工工资计入什么科目
  • windows10轻松使用是什么
  • 财务决算报表是谁编制的
  • 不用命令打开组策略
  • php实战开发教程
  • 土地增值税预缴税率表
  • PHP:mdecrypt_generic()的用法_Mcrypt函数
  • PHP:mcrypt_generic_end()的用法_Mcrypt函数
  • 房地产开发公式
  • 鸳鸯小鸟
  • uni-app编译
  • lnewusers命令 创建用户账号
  • 所得税需要结转么
  • 赔付支出计算公式
  • 发票走账不走账怎么处理
  • 抵押房产的保险费
  • php判断是否为整数
  • 新公司财务需要哪些东西
  • 电子税务局网开电子发票
  • SQL Server 2016 CTP2.2安装配置方法图文教程
  • 税控服务费全额抵扣申报怎么填
  • 发票已经认证后怎么撤销
  • 蓝字发票红字发票什么意思
  • 库存商品盘亏计哪个科目
  • 暂估成本以后也没有票回来了
  • 每月需要计提的分录
  • 小规模开票额度有限制吗
  • 怎么做个体户
  • 核定征收也需要报税务报表吗?
  • 汇算清缴费用调增会计处理
  • 工资全扣是什么意思
  • 权益类会计科目有哪些科目
  • 待处理财产损益期末结转到哪里
  • 国家也通过国有企业利用自己的财政资金
  • xtrabackup备份原理
  • Win10 Mobile Creators预览版14959更新修复内容与已知问题汇总
  • linux 解析
  • win8无法正常启动你的电脑
  • winxp系统用户不见了
  • centos libcrypto.so.1.0.0
  • win8怎么设置自启动
  • win8禁用网络之后如何开启
  • cocos2d-js教程
  • JavaScript中数组长度的属性
  • Node.js中的事件循环是什么
  • AngularJS中controller控制器继承的使用方法
  • js鼠标滚动页面触发事件
  • js如何获取浏览器窗口大小
  • Android 添加数据到本地Excel表
  • 按钮点击后消失
  • 基层税务工作难点重点热点
  • 建筑业按多少税收
  • 江西省国家税务局
  • 一级稽查体制
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设