JS如何实现倒计时效果

itclanCoder

于 2023-01-04 09:00:57 发布

阅读量432

点赞数

文章标签： javascript vue.js 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/wzc_coder/article/details/128556684

版权

前言

在一些重大的消费节日,或特殊节日,比如:双十一,奥运会,圣诞节,元旦等,很多电商网站都会有倒计时的习惯

团购拼抢等促销活动,本示例演示一个简易的倒计时的效果

示例展示

https://coder.itclan.cn/fontend/js/35-daojishi-effect/

点击左下角阅读原文即可查看

原生JS

具体的代码如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算离元旦还有多长时间</title>
  </head>
  <body>
      <input type="button" value="开始进入倒计时" onclick="timeInit()" />
      <p id="text"></p>
      <script>
          // 开始倒计时函数
          function timeInit() {
            setInterval(function() {
              var now = new Date(); // 获取当前时间
              // 得到下一个特定的时间,比如元旦
              var end = new Date(now.getYear()+1+1900,0,1);
              // 得到距离元旦时间戳的毫秒数
              var time = end.getTime() -

最低0.47元/天解锁文章

itclanCoder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS如何实现倒计时效果

前言在一些重大的消费节日,或特殊节日,比如:双十一,奥运会,圣诞节,元旦等,很多电商网站都会有倒计时的习惯团购拼抢等促销活动,本示例演示一个简易的倒计时的效果02示例展示https://coder.itclan.cn/fontend/js/35-daojishi-effect/点击左下角阅读原文即可查看02原生JS具体的代码如下所示<!DOCTYPE html><htmlla...
复制链接

扫一扫