js—时间对象

最新推荐文章于 2023-11-29 14:30:06 发布

Doris ampson

最新推荐文章于 2023-11-29 14:30:06 发布

阅读量326

点赞数 1

分类专栏： js学习

本文链接：https://blog.csdn.net/qq_34376264/article/details/77752785

版权

js学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.Date 对象用于处理日期和时间。
2.创建 Date 对象的语法：var myTime=new Date()
注：Date 对象会自动把当前日期和时间保存为其初始值。
3.Date对象的常用方法：
Date()：返回当日的日期和时间（直接使用，不需要对象调用）
getDate()：返回一个月的某一天（1~31）
getDay()：返回一周中的某一天（0~6分别代表周日~周六）
getMonth()：返回月份（0~11）
getFullYear()：返回四位数字的年份
getHours()：返回小时数（0~23）
getMinutes()：返回分钟数（0~59）
getSeconds()：返回秒数（0~59）
getTime()：返回 1970 年 1 月 1 日至今的毫秒数。（用来判断一段程序运行的时间）
4.时间对象的应用：

练习1：把当前时间做一个字符串拼接，并用计时器定时更新时间，且要求页面刷新时也显示时间

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
h1{margin-top:100px; margin-left:40px; font-weight:bolder; color:#000; font-size:36px;}
</style>
</head>

<body>
    <h1 id="h1"></h1>
    <script>
        var oH1=document.getElementById("h1");
        showtime();
        setInterval(function(){
            showtime();
        },1000)
        function showtime(){
            var myTime = new Date();//当时在写这段代码的时候，犯了一个很致命也很让人啼笑皆非的错误，没有把定义时间对象放在计时器外面，相当于页面刷新时获取到了一个时间对象，而后来计时器里用该对象获取时间的方法全部无用，因为该对象在页面刷新之后已失效，因此就导致了时间不能与系统时间同步的错误。后来将定义时间对象放在计时器里面就解决了这一问题
            oH1.innerHTML=myTime.getFullYear()+"年"+(myTime.getMonth()+1)+"月"+myTime.getDate()+"日"+"  "+myTime.getHours()+":"+myTime.getMinutes()+":"+myTime.getSeconds();
        }
    </script>
</body>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这里写图片描述

但是像这种情况，如果月份、日期等是个位数时显示出来就会很难看，所以应该对输出格式做统一规定：

function addZ(a){
    return a<10 ? a='0'+a : a=''+a;
}
function showTime(){
    var myTime = new Date();
    var iYear = myTime.getFullYear();
    var iMonth = myTime.getMonth()+1; 
    var iDate = myTime.getDate();
    var iWeek = myTime.getDay();
    if(iWeek === 0)iWeek = '星期日';
    if(iWeek === 1)iWeek = '星期一';
    if(iWeek === 2)iWeek = '星期二';
    if(iWeek === 3)iWeek = '星期三';
    if(iWeek === 4)iWeek = '星期四';
    if(iWeek === 5)iWeek = '星期五';
    if(iWeek === 6)iWeek = '星期六';
    var iHours = myTime.getHours();
    var iMinutes = myTime.getMinutes();
    var iSeconds = myTime.getSeconds();
    var str = '';
    str = addZ(iHours)+addZ(iMinutes)+addZ(iSeconds);
    $('p1').innerHTML = str;
    //alert(str.charAt(5));
    for(var i = 0; i<aImg.length;i++){
        aImg[i].src = 'img/' + str.charAt(i) +'.JPG';
    }
}
 
 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
 
 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

当然，也可以用有数字的图片来渲染表达的效果：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0;}
#p1{font-size:50px;}
ul,li,p{margin:0;padding:0;}
li{list-style:none; float:left;}
#li1{width:122px; height:172px; background:url(img/colon.JPG);}
</style>
</head>
<body>
<p id="p1"></p>
<ul>
    <li><img src="img/0.JPG" width="122" height="172"/></li>
    <li><img src="img/0.JPG" width="122" height="172"/></li>
    <li id="li1"></li>
    <li><img src="img/0.JPG" width="122" height="172"/></li>
    <li><img src="img/0.JPG" width="122" height="172"/></li>
    <li id="li1"></li>
    <li><img src="img/0.JPG" width="122" height="172"/></li>
    <li><img src="img/0.JPG" width="122" height="172"/></li>
</ul>
<script>
var aImg = document.getElementsByTagName('img');

showTime();
setInterval(function(){
    showTime();
},1000)


function $( v ){//$为函数名
    if( typeof v === 'function' ){
        window.onload = v;
    } else if ( typeof v === 'string' ) {
        return document.getElementById(v);
    } else if ( typeof v === 'object' ) {
        return v;
    }
}
function addZ(a){
    return a<10 ? a='0'+a : a=''+a;
}
function showTime(){
    var myTime = new Date();
    var iYear = myTime.getFullYear();
    var iMonth = myTime.getMonth()+1; 
    var iDate = myTime.getDate();
    var iWeek = myTime.getDay();
    if(iWeek === 0)iWeek = '星期日';
    if(iWeek === 1)iWeek = '星期一';
    if(iWeek === 2)iWeek = '星期二';
    if(iWeek === 3)iWeek = '星期三';
    if(iWeek === 4)iWeek = '星期四';
    if(iWeek === 5)iWeek = '星期五';
    if(iWeek === 6)iWeek = '星期六';
    var iHours = myTime.getHours();
    var iMinutes = myTime.getMinutes();
    var iSeconds = myTime.getSeconds();
    var str1 = '';
    var str2 = '';
    str1 = addZ(iHours)+addZ(iMinutes)+addZ(iSeconds);
    str2 = addZ(iYear)+"年"+addZ(iMonth)+"月"+addZ(iDate)+"日"+iWeek;
    $('p1').innerHTML = str2;
    for(var i = 0; i<aImg.length;i++){
        aImg[i].src = 'img/' + str1.charAt(i) +'.JPG';
    }
}

</script>
</body>
 
 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

这里写图片描述

5.倒计时原理
将要达到的时间是固定的，而现在的时间在不断地变化，所以倒计时就是不断地用将来要到达的时间减去现在的时间（相减的结果是毫秒数，需要通过数学计算换成天小时*分）

练习：做两个输入框，距离第一个输入框的时间，还剩第二个输入框显示时间，点击按钮展示（用字符串传入）当差值为0的时候要停止计时器

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#input1{border:none; width:400px; height:50px; border:1px #666 solid;}
#input3{border:none; width:300px; height:50px; border:1px #666 solid;}
#input2{cursor:pointer;}
#div1{position:relative; left:50%; margin-left:-400px;margin-top:300px;}
</style>
</head>

<body>
    <div id="div1">
        <input id="input1" type="text" placeholder='请输入您想到达的未来时间：(格式如September 1,2016 9:48:12)' />
        <input id="input2" type="button" value='查看您距离未来时间还有多久' />
        <input id="input3" type="text" placeholder='这里将显示您距离未来时间所剩的时间：' />
    </div>
    <script>
        var oDiv=document.getElementById("div1");
        var aInput=oDiv.getElementsByTagName("input");
        var timer=null;
        aInput[1].onclick=function(){
            clearInterval(timer);
            timer=setInterval(function (){
                fn();
            },1000)
        }
        function fn(){
            var iNew = new Date((aInput[0].value)); 
            var iNow = new Date();
            var time = Math.floor((iNew - iNow)/1000);
            var day ='0'+Math.floor(time/86400);
            var hour =Math.floor(time%86400/3600);
            var minute =Math.floor(time%3600/60);
            var second =time%60;
            var str = '距离结束还有'+day+'天 '+judge(hour)+'小时 '+judge(minute)+'分钟 '+judge(second)+'秒';
            aInput[2].value=str;
            if(time<=0){
                clearInterval(timer);
                aInput[2].value = '时间到！';
            }
        }
        function judge(a){
            return a<10 ? a='0'+a : a=''+a;
        }
    </script>
</body>
 
 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
 
 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

注：在本题中，输入未来时间格式为字符串的原因是：创建的时间对象返回的数本身就是一个字符串，如alert(mytime=new Date())返回的内容是如下格式的字符串
这里写图片描述

上面代码的运行结果：
这里写图片描述

在到达预计时间后：
这里写图片描述

Doris ampson

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js—时间对象

1.Date 对象用于处理日期和时间。 2.创建 Date 对象的语法：var myTime=new Date() 注：Date 对象会自动把当前日期和时间保存为其初始值。 3.Date对象的常用方法： Date()：返回当日的日期和时间（直接使用，不需要对象调用） getDate()：返回一个月的某一天（1~31） getDay()：返回一周中的某一天（0~6分别代表周日
复制链接

扫一扫