JavaScript电子时钟+倒计时

JavaScript时间类

获取时分秒:

getHours()

getMinutes();

getSeconds();

获取年月日:

getFullYear();

getMonth() + 1;//获取的月份需要+1;

getDate(); //日期

getDay(); //获取的是星期,0--》星期天

实例:(效果图)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子时钟</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
     #wrap{
         width: 200px;
         height: 100px;
         background-color: black;
     }
     #time{
          color: #fff;
          display: block;
          font-size: 24px;
          margin: 0 auto;
          padding-top: 20px;
          /*border: 1px solid red;*/
          text-align: center;
          width: 100px;
     }
     #timer{
         color: green;
          display: block;
          font-size: 18px;
          margin: 0 auto;
          padding-top: 10px;
          /*border: 1px solid red;*/
          text-align: center;
          /*width: 100px;*/
     }
    </style>
</head>
<body>
       <div id="wrap">
            <span id="time"></span>
         <span id="timer"></span>
       </div>
     <script type="text/javascript">
       var time =document.getElementById("time");
        var timer =document.getElementById("timer");

       setInterval(function() {

        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var years = date.getYear();
        var dates = date.getDate();
        var monts = date.getMonth()+1;
    var day = date.getDay();
        var parses = date.getMilliseconds()%60;

     switch(day){
          case 0:
          day="日";
           case 1:
          day="一";
           case 2:
          day="二";
           case 3:
          day="三";
           case 4:
          day="四";
           case 5:
          day="五";
           case 6:
          day="六";
     }
        //如果秒数小于十,在秒数面前连接一个0
        if(seconds < 10) {
            seconds = "0" + seconds;
        }
        //如果分钟数小于十,在分钟数面前连接一个0
        if(minutes < 10) {
            minutes = "0" + minutes;
        }
        //如果小时数小于十,在小说数面前连接一个0
        if(hours < 10) {
            hours = "0" + hours;
        }
        if(years<1900) {
            years = years+1900;
        }
        if(dates<10) {
            dates = "0" + dates;
        }
        if(monts<10) {
            monts = "0" + monts;
        }
        if(parses<10) {
            // parses = "0" + parses;
        }

        timer.innerHTML =  years +"年" +monts+ "月" +dates +"号"+"星期"+day;
            time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
        // date.getTime()//返回的是一个从1970年到当前的毫秒数(时间戳)(ms)
        // date.getMonth()//返回的是月份,从0开始算
        // date.getFullYear();

    },10)
     </script>
</body>
</html>

2.倒计时

 <!doctype html>
<html>
<meta charset="utf-8">
<title>倒计时</title>
<head> 

     <style type="text/css">
     *{
         margin: 0;
         padding: 0;

     }
       .wrap{
           width: 350px;
           height: 100px;
           background-color: black;
       }
       #dates{
           color: #fff;
           margin-top: 10px;
           display: block;
           margin-left: 15px;
       }
       p{
           color: #fff;
       }
     </style>
</head>
<body>
<div class="wrap">
    <p>距离2016年02月08号00时00分00秒春节倒计时:</p>
    <!-- <p>距离2016年01月07号23时59分59秒倒计时:</p> -->
    <span id="dates"></span>
</div>
<script type="text/javascript">
var dates = document.getElementById("dates");
function getRTime(){
var EndTime= new Date(‘2016/02/07 23:59:59‘); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime(); 

var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
var p=Math.floor(t%60);
if(d<10){
   d="0"+d;
}
if(h<10){
   h="0"+h;
}
if(m<10){
   m="0"+m;
}
if(s<10){
   s="0"+s;
}
if(p<10){
   p="0"+p;
}

dates.innerHTML=d+ "日" + h + "小时"+ m +"分" + s +"秒"+p+"毫秒";
}
setInterval(getRTime,1);
</script>
</body>
</html>
时间: 2024-10-02 04:55:18

JavaScript电子时钟+倒计时的相关文章

Javascript 电子时钟源码

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta h

一款纯JavaScript的圆形电子时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>一款纯JavaScript的圆形电子时钟丨

美女时钟+电子时钟

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>美女时钟</ti

JS的Form文本框内的电子时钟

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS的Form文本框内的电子时钟丨石家庄玻璃隔断厂家</TITLE> </HEAD> <body bgcolor="#ffffff" onLoad="startclock();"> <scri

随机事件、电子时钟、验证码

Dom的运用: 1.电子时钟 时间:<input id="tt" type="text">//html中建立文本框显示时间 <script> function dianziTime(name){ var t = new Date(),//新建一个时间 y = t.getFullYear(),//获取年 m = (+t.getMonth()+1) >= 10 ? +t.getMonth()+1 : "0" +(+t.g

如何利用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终效果不错的实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: 1 var date=new

PyQt5用QTimer编写电子时钟

[说明] 本文用 PyQt5 的QTimer类的两种方式实现电子时钟 [效果图] [知识点] QTimer类提供了定时器信号/槽和单触发定时器. 它在内部使用定时器事件来提供更通用的定时器. QTimer很容易使用:创建一个QTimer,使用start()来开始并且把它的timeout()连接到适当的槽.当这段时间过去了,它将会发射timeout()信号. [实现] 1.定时器信号/槽方式 1 class MyTimer(QWidget): 2 def __init__(self, parent

如何用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终不错的效果实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: var date=new Da

利用51单片机制作的电子时钟

最近研究起来了单片机,用的是国产STC98C52芯片. STC89C52是STC公司生产的一种低功耗.高性能CMOS8位微控制器,具有 8K 在系统可编程Flash存储器.STC89C52使用经典的MCS-51内核,但做了很多的改进使得芯片具有传统51单片机不具备的功能.在单芯片上,拥有灵巧的8 位CPU 和在系统可编程Flash,使得STC89C52为众多嵌入式控制应用系统提供高灵活.超有效的解决方案. 买了很长时间了可是一直在那里放着,今天重新拿出来写了一段电子时钟的C++程序,利用充电宝供