• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 原生js实现倒计时--2018

原生js实现倒计时--2018

作者:前端工程师_钱成 字体:[增加 减小] 来源:互联网 时间:2017-05-11

前端工程师_钱成通过本文主要向大家介绍了原生js实现轮播,原生js实现ajax,原生js实现选项卡,原生js实现轮播图,原生js实现图片轮播等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

思路:

(1)获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、2018年距离现在的总秒数;

(2)总秒数/86400,整数部分代表天;

(3)余数部分/3600,整数部分代表小时;

(4)余数部分/60,整数部分代表分钟;

效果如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin: 0;
   padding:0;
  }
  p {
   font-size: 95px;
   text-align: center;
  }
  p span {
   color: red;
  }
  p span.time {
   color: black
  }
 </style>
</head>
<body>
<p>距离2018年还有</p>
<p><span></span></p>
<script>
 var oSpan = document.getElementsByTagName('span')[0];
 function tow(n) {
  return n >= 0 && n < 10 ? '0' + n : '' + n;
 }
 function getDate() {
  var oDate = new Date();//获取现在日期对象
  var oldTime = oDate.getTime();//现在距离1970年的毫秒数
  var newDate = new Date('2018/1/1 00:00:00');//获取指定日期对象
  var newTime = newDate.getTime();//2018年距离1970年的毫秒数
  var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
  var day = Math.floor(second / 86400);//整数部分代表的是天;一天有24*60*60=86400秒 ;
  second = second % 86400;//余数代表剩下的秒数;
  var hour = Math.floor(second / 3600);//整数部分代表小时;
  second %= 3600; //余数代表 剩下的秒数;
  var minute = Math.floor(second / 60);
  second %= 60;
  var str = tow(day) + '<span class="time">天</span>'
    + tow(hour) + '<span class="time">小时</span>'
    + tow(minute) + '<span class="time">分钟</span>'
    + tow(second) + '<span class="time">秒</span>';
  oSpan.innerHTML = str;
 }
 getDate();
 setInterval(getDate, 1000);
</script>
</body>
</html>
</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 原生JS京东轮播图代码
  • 原生js实现轮播图
  • 纯JS实现轮播图
  • 原生js实现倒计时--2018
  • 原生JS实现《别踩白块》游戏(兼容IE)
  • 原生JS实现图片翻书效果
  • 原生js实现打字动画游戏
  • 原生js实现无限循环轮播图效果
  • 原生js实现回复评论功能

相关文章

  • 2017-05-11微信小程序 template模板详解及实例代码
  • 2017-05-11ThinkPHP+jquery实现“加载更多”功能代码
  • 2017-05-11jQuery实现链接的title快速出现的方法
  • 2017-05-11js实现截图保存图片功能的代码示例
  • 2017-05-11浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
  • 2017-05-11Vue实现双向数据绑定
  • 2017-05-11gulp加批处理(.bat)实现ng多应用一键自动化构建
  • 2017-05-11js实现贪吃蛇小游戏(容易理解)
  • 2017-05-11利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
  • 2017-05-11jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详解在Angularjs中ui-sref和$state.go如何传递参数
    • JavaScript中值类型和引用类型的区别
    • jQuery弹出层插件popShow用法示例
    • JS实现复选框的全选和批量删除功能
    • jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
    • js-FCC算法-No repeats please字符串的全排列(详解)
    • JavaScript中String对象的方法介绍
    • js运算符
    • bootstrapValidator.min.js表单验证插件
    • javascript事件的传播基础实例讲解(35)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有