JavaScript实现网页跨年倒计时


Posted in Javascript onDecember 02, 2020

JavaScript网页?跨年倒计时,供大家参考,具体内容如下

最近学弟在追一个学妹,我在帮学弟出谋划策。

学妹告诉学弟,我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候,如果你还喜欢我,那个时候我再给你答案。

于是今天我帮学弟做了一个跨年倒计时的网页,希望他能够坚持下去。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
  <style>
    div {
      margin-top: 200px;
      margin-left: 500px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 900;
    }
    
    li {
      float: left;
      margin: 2px;
      list-style: none;
      width: 50px;
      height: 50px;
      color:white;
      line-height: 50px;
      text-align: center;
      background-color: black;
      font-size: 20px;
      font-weight: 900;
      
    }
  </style>
</head>
<body>
  <div>
    <li class="text" style = "width: 135px;">跨年倒计时:</li>
    <li class="day">0</li>
    <li class="hour">1</li>
    <li class="minute">2</li>
    <li class="second">3</li>
    
  </div>

  <script>
    //获取元素
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour');//获取小时元素
    var minute = document.querySelector('.minute');//获取分钟元素
    var second = document.querySelector('.second');//获取秒数元素
    var inputTime = +new Date('2021-1-1 00:00:00');//输入一个时间
    countDown ();//在定时器开启之前先调用一次函数,防止一秒的空白期
    //开启定时器
    setInterval(countDown, 1000);
    function countDown (){
      //获取当前的时间
      var nowTime = +new Date();
      var times = (inputTime - nowTime) / 1000;//times是剩余的总秒数
      var d = parseInt(times / 60 / 60 /24);
      d = d < 10 ? '0'+ d : d;
      //将剩余的小时数给小时的盒子
      day.innerHTML = d+"天";
      //小时
      var h = parseInt(times / 60 / 60 % 24);
      h = h < 10 ? '0'+ h : h;
      //将剩余的小时数给小时的盒子
      hour.innerHTML = h+"时";
      // 分钟
      var m = parseInt(times / 60 % 60);
      m = m < 10 ? '0'+ m : m;
      //将剩余的分钟数给分钟的盒子
      minute.innerHTML = m+"分";
      //秒数
      var s = parseInt(times % 60);
      s = s < 10 ? '0'+ s : s;
      //将剩余的描述给秒的盒子
      second.innerHTML = s+"秒";
    }
  </script>
</body>
</html>

JavaScript实现网页跨年倒计时

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js对文章内容进行分页示例代码
Mar 05 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
JavaScript async/await原理及实例解析
Dec 02 #Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 #Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
JavaScript函数柯里化实现原理及过程
Dec 02 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
vue实现扫码功能
2020/01/17 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
数控专业应届生求职信
2013/11/27 职场文书
高一物理教学反思
2014/01/24 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
抄作业检讨书
2014/02/17 职场文书
学生打架检讨书
2014/10/20 职场文书
校本课程教学计划
2015/01/19 职场文书
付款承诺函范文
2015/01/21 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
综合素质自我评价评语
2015/03/06 职场文书
村主任当选感言
2015/08/01 职场文书