源:https://www.oschina.net/code/snippet_2318153_54763

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>原生js 当前时间 倒计时代码</title>
  7. <style>
  8. *{margin:0;padding:0;}
  9. body{text-align:center;}
  10. .text{margin-top:150px;font-size:14px;}
  11. </style>
  12. <script>
  13. window.onload=function(){
  14. getMyTime();
  15. getMyTime1();
  16. }
  17. //1.前面补0
  18. function p(n){
  19. return n<10?'0'+n:n;
  20. }
  21. //2.倒计时
  22. function getMyTime(){
  23. var startDate=new Date();
  24. var endDate=new Date('2017/4/17 11:15:00');
  25. var countDown=(endDate.getTime()-startDate.getTime())/1000;
  26. var day=parseInt(countDown/(24*60*60));
  27. var h=parseInt(countDown/(60*60)%24);
  28. var m=parseInt(countDown/60%60);
  29. var s=parseInt(countDown%60);
  30. document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
  31. setTimeout('getMyTime()',500);
  32. if(countDown<=0){
  33. document.getElementById('time').innerHTML='活动结束';
  34. }
  35. }
  36. //3.当前时间
  37. function getMyTime1(){
  38. var myDate=new Date();
  39. var year=myDate.getFullYear();
  40. var month=myDate.getMonth()+1;
  41. var day=myDate.getDate();
  42. var week=myDate.getDay();
  43. var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  44. var hour=myDate.getHours();
  45. var minute=myDate.getMinutes();
  46. var second=myDate.getSeconds();
  47. document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+'&nbsp;'+array[week]+'&nbsp;'+p(hour)+':'+p(minute)+':'+p(second);
  48. setTimeout('getMyTime1()',500);
  49. }
  50. </script>
  51. </head>
  52. <body>
  53. <div class="text">
  54. <p>倒计时间:<span id="time"></span></p>
  55. <p>当前时间:<span id="time1"></span></p>
  56. </div>
  57. </body>
  58. </html>

原生js 当前时间 倒计时代码的更多相关文章

  1. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  2. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  3. 原生js的简单倒计时

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>倒计 ...

  4. 原生 JS 实现扫雷 (分析+代码实现)

    阅读这篇文章需要掌握的基础知识:Html5.CSS.JavaScript 在线Demo:查看 扫雷规则 在写扫雷之前,我们先了解下它的游戏规则 ● 扫雷是一个矩阵,地雷随机分布在方格上. ● 方格上的 ...

  5. php 时间倒计时代码 个人写法 有好的想法的欢迎贴出来分享

    $now=time(); $secondtime=$end_time-$now;//期限时间减去现在时间 剩余时间 $second=$secondtime % 60;//取余得到秒数 $nowtime ...

  6. js 获取时间对象代码

    /** * 获取时间对象 */function getDateObj(addDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+addDa ...

  7. 原生JS封装时间运动函数

    /*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...

  8. 原生js,时间日期简单应用。

    一.数码时钟,滚动切换时间. <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. 原生JS 将时间转换成几秒前,几分钟前…常用于评论回复功能

    //格式化时间 留备用~ function getDateDiff(dateStr) { var publishTime = dateStr / 1000, d_seconds, d_minutes, ...

随机推荐

  1. 什么是Unicode

    写这篇博客的原因, 从做软件开始,什么ASCII码, Unicode,UTF-8,UTF-16,UTF-32......这些鬼东西总是经常碰到,只知道这些鬼是编码格式,其他的就啥都不清楚了,既然总是遇 ...

  2. 转:"为自动填充列调整大小期间不能执行此操作"解决办法 .

    转载自:http://blog.csdn.net/zhxingway/article/details/5384690 今天在测试的时候,打开一个窗口突然发现出现以下错误,就算我在打开窗口那个按钮里面和 ...

  3. Google自动广告,将广告代码放置在 HTML 中的什么位置?

    Google自动广告,将广告代码放置在 HTML 中的什么位置? 为自动广告生成广告代码后,您需要将此代码放置在要展示广告的每个网页中.您应将广告代码放置在网页的 <head> 标记(或正 ...

  4. 2017年3月29日 webService入门理解 二

    前边说到了N多webService的概念. 其实,说白了,我个人理解的话,webService就是一个“概念”.就好像互联网一样,就是一个很虚幻,很高的一个概念.同样,webService也是.互联网 ...

  5. AtCoder Beginner Contest 084(AB)

    A - New Year 题目链接:https://abc084.contest.atcoder.jp/tasks/abc084_a Time limit : 2sec / Memory limit  ...

  6. 轻量级MVC框架的实现

    _ 写一个通用控制器,在开发的时候只用写模型和视图. 注:请求路径和模型的对应关系 step1.添加一个注解@RequestMapping /** 自定义注解:用于配置请求路径和处理器的对应关系. * ...

  7. sqlalchemy多对多查询

    # coding:utf-8 from sqlalchemy import create_engine, Column, String, Integer, ForeignKey, Table from ...

  8. JavaScript数组实现图片轮播

    最终效果 注:图片来源于百度图片 文件结构: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  9. spring是如何控制事务

    1.spring的核心是ioc和aop,其中ioc是将控制权交由spring容器进行管理,aop是面向切面编程,内部实现使用的是动态代理,二动态代理内部实现用的是反射.spring的事务是通过aop来 ...

  10. Linux 安装本地 yum源

    放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom  /media/cdrom  #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...