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 本页面传值实现代码
May 17 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
js实现简单的验证码
Dec 25 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
公众号SVG动画交互实战代码
May 31 Javascript
js制作提示框插件
Dec 24 Javascript
Javascript实现打鼓效果
Jan 29 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水印
2007/03/16 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
TensorFlow变量管理详解
2018/03/10 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
清明节寄语2015
2015/03/23 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL