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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Position属性之relative用法
Dec 14 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
2种简单的js倒计时方式
Oct 20 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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 for 循环语句使用方法详细说明
2010/05/09 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
一个JS翻页效果
2007/07/23 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
用Python中的字典来处理索引统计的方法
2015/05/05 Python
浅谈Python中的闭包
2015/07/08 Python
Python编程中的文件操作攻略
2015/10/16 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python ChainMap的使用和说明详解
2019/06/11 Python
pytorch 共享参数的示例
2019/08/17 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python 8种必备的gui库
2020/08/27 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
绿色城市实施方案
2014/03/19 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
工作证明英文模板
2014/10/21 职场文书
典型事迹材料范文
2014/12/29 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
JavaScript中isPrototypeOf函数
2021/11/07 Javascript