头像

简单的自定义日期时间倒计时js代码

来源:http://www.sucaihuo.com/js/3738 素材火管理员 2018-06-10 11:20浏览(115) 收藏

简单的自定义日期时间倒计时js代码,界面风格也挺好看的。
简单的自定义日期时间倒计时js代码
分类:日期时间 > 倒计时 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 5 下载资源 下载积分: 10 积分

js代码

<script>
const fourthOfJuly = new Date("July 4, 2028 12:00:00").getTime();

// countdown
let timer = setInterval(function() {

  // get today's date
  const today = new Date().getTime();

  // get the difference
  const diff = fourthOfJuly - today;

  // math
  let days = Math.floor(diff / (1000 * 60 * 60 * 24));
  let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // display
  document.getElementById("timer").innerHTML =
    "<div class=\"days\"> \
  <div class=\"numbers\">" + days + "</div>days</div> \
<div class=\"hours\"> \
  <div class=\"numbers\">" + hours + "</div>hours</div> \
<div class=\"minutes\"> \
  <div class=\"numbers\">" + minutes + "</div>minutes</div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + seconds + "</div>seconds</div> \
</div>";

}, 1000);</script>
评论7
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 6楼
    06-13 11:54
    爱***远
    我是来学习JS代码的 前端不行 多学习
  • 头像 5楼
    06-13 08:38
    崔***啊
    很好看的效果界面,不错,学习学习
  • 头像 4楼
    06-11 10:04
    x-***in
    en 好喜欢这个 挺不错的
  • 头像 3楼
    06-11 09:07
    24***om
    倒时器的效果挺不错的。牛。
  • 头像 板凳
    06-11 08:33
    u *** ゜
    程序不错,可以用的到。
  • 头像 椅子
    06-10 19:44
    宝***志
    配色很漂亮,赞赞赞
  • 头像 沙发
    06-10 16:42
    AJ***on
    界面风格确实很好看!谢谢!
1 2