第34天:日期函数、定时器、倒计时

一、日期函数(Date())
设置本地日期:年月日时分秒
1、声明日期
var date=new Date();//创建一个新的日期函数
2、使用函数
date.getTime();//提倡使用,
date.valueOf();得到距离1970年的毫秒数

console.log(Date().now());//直接使用
console.log(+new Date());

3、获取日期和时间
getDate()  获取日 1-31
getDay ()   获取星期 0-6
getMonth ()  获取月 0-11
getFullYear ()       获取完整年份(浏览器都支持)
getHours ()  获取小时 0-23
getMinutes ()    获取分钟 0-59
getSeconds ()    获取秒 0-59
getMilliseconds ()    获取当前的毫秒
getTime ()    返回累计毫秒数(从1970/1/1午夜)

二、定时器
window.setInterval("执行的函数",间隔时间);
setInterval(fun,1000);每隔1000毫秒执行一次fun函数
setInterval("fun()",1000);//fun()立刻执行
setInterval(fun(){},1000);

三、倒计时
将来的毫秒数-现在的毫秒数,不断转换成时分秒
var endTime=new Date("2015/12/12");//Date(),括号里写日期就是自己定义的时间,不写日期默认当前时间
new Date("2017/10/01 18:30:35");//日期和时分秒之间用空格隔开

案例:

1、日历

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>日历</title>
 6     <style>
 7         .box{
 8             width: 150px;
 9             height: 180px;
10             margin: 100px auto;
11             background-color: #369;
12             text-align: center;
13         }
14         .box p{
15             font-size: 14px;
16             color: #fff;
17             line-height: 50px;
18         }
19         .box span{
20             display: block;
21             width: 80px;
22             height: 80px;
23             background-color: yellow;
24             color: red;
25             font-size: 60px;
26             font-weight: 60px;
27             line-height:80px;
28             margin: 20px auto;
29         }
30     </style>
31     <script>
32         window.onload=function(){
33             var box=document.getElementById("box");
34             var boys=box.children;//获取box的所有孩子
35             //星期数组
36             var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
37             //声明日期函数
38             var date=new Date();
39             boys[0].innerHTML=date.getFullYear()+"年"+(date.getMonth()+1)+"月"
40                     +date.getDate()+"日"+"  "+arr[date.getDay()];
41             boys[1].innerHTML=date.getDate();
42
43         }
44     </script>
45 </head>
46 <body>
47     <div class="box" id="box">
48         <p></p>
49         <span></span>
50     </div>
51 </body>
52 </html>

运行效果:

2、定时器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定时器</title>
 6     <style>
 7         #demo{
 8             width: 100px;
 9             height: 100px;
10             line-height:100px;
11             text-align: center;
12             font-size: 35px;
13             color: red;
14             margin:100px auto;
15             border:1px solid #c1c1c1;
16             background-color: yellow;
17         }
18     </style>
19     <script>
20         window.onload=function(){
21             var demo=document.getElementById("demo");
22             setInterval(fn,1000);//开启定时器
23             var num=1;
24             function fn(){
25                 num++;
26                 demo.innerHTML=num;
27             }
28         }
29     </script>
30 </head>
31 <body>
32     <div id="demo"></div>
33 </body>
34 </html>

运行效果:

3、倒计时

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>倒计时</title>
 6     <style>
 7         #demo{
 8             margin: 100px auto;
 9             font-size: 35px;
10             color: red;
11             text-align: center;
12         }
13     </style>
14     <script>
15         window.onload=function(){
16             /*var date=new Date();//当前时间
17             console.log(date);
18             var endTime=new Date("2017/10/01 21:30:55");//自定义时间:日期和时分秒
19             console.log(endTime);*/
20
21             var demo=document.getElementById("demo");
22             var endTime=new Date("2017/11/11 00:00:00");
23             setInterval(clock,1000);//开启定时器
24             function clock(){
25                 var nowTime=new Date();//得到当前时间
26                 //将来的时间毫秒数-现在的时间毫秒数除以1000,取整得到相差秒数
27                 var second=parseInt((endTime.getTime()-nowTime.getTime())/1000);
28                 var day=parseInt(second/3600/24);//得到天数
29                 var hour=parseInt(second/3600%24);//得到小时数
30                 var min=parseInt(second/60%60);//得到分钟数
31                 var s=parseInt(second%60);//得到秒数
32                 //console.log(day+hour+min+second);
33                 console.log(s);
34                 //给小于10的数前面加0
35                 day<10 ? day="0"+day : day;
36                 hour<10 ? hour="0"+ hour : hour;
37                 min<10 ? min="0"+ min : min;
38                 s<10 ? s="0"+ s :s;
39                 demo.innerHTML="距离双11抢购时间再剩:"+day+"天"+hour+"小时"+min+"分"+s+"秒";
40 
41             }
42         }
43     </script>
44 </head>
45 <body>
46     <div id="demo"></div>
47 </body>
48 </html>

运行效果:

来郑州1周年纪念日!

时间: 2024-08-07 17:01:16

第34天:日期函数、定时器、倒计时的相关文章

hive函数总结-日期函数

获取当前UNIX时间戳函数: unix_timestamp语法: unix_timestamp() 返回值: bigint说明: 获得当前时区的UNIX时间戳举例: hive> select unix_timestamp() from dual; OK 1455616811 Time taken: 0.785 seconds, Fetched: 1 row(s) 日期函数UNIX时间戳转日期函数: from_unixtime 语法:from_unixtime(bigint unixtime[,

ORACLE PL/SQL 字符串函数、数学函数、日期函数

ORACLE PL/SQL 字符串函数.数学函数.日期函数 --[字符串函数] --字符串截取substr(字段名,起始点,个数) select Name,substr(Name,2,4),substr(Name,0,3),substr(Name,-2,3),substr(Name,-2,1) from t1; --字符串从前面取三个(0开始) select Name,substr(Name,0,3) from t1; --字符串从后面取三个 select Name,substr(Name,-3

[转] SQL日期函数dayadd/datediff/datepart

1 函数一: 2 3 CREATE OR REPLACE FUNCTION dayadd(p_Component varchar2, 4 p_Number number, 5 p_Date date) RETURN DATE IS 6 /****************************************************************/ 7 /* 该函数为日期计算函数主要是计算] */ 8 /* 从当前日期开始经过多少日.季.月.年等后的日期. */ 9 /* 入参

时间日期函数,类型转化,子查询,分页查询

1.时间日期函数: SET DATEFIRST 1 --设置星期一为第一天--datepart函数,返回时间日期中的某一个部分--参数1是指返回哪一个部分,dw表示dayofweek--参数2是指哪个时间日期里面去返回--datefirst是系统常量,在使用时需要加上@@SELECT @@DATEFIRST AS '1st Day', DATEPART(dw, GETDATE()) AS 'Today'--getdate指在执行时获取当前系统时间SELECT GETDATE()--在执行时取当前

MySQL日期函数、时间函数总结(MySQL 5.X)

获得当前日期时间函数 1.1 获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | now()               | +---------------------+ | 2015-11-10 13:36:55 | +---------------------+ 1 row in set (0.00 sec) 除了 now() 函数能获得当前的日期时间外,MySQL 中还有下面的函数:

C#日期函数使用大全

1 DateTime dt = DateTime.Now; 2 3 dt.ToString();//2005-11-5 13:21:25 4 5 dt.ToFileTime().ToString();//127756416859912816 6 7 dt.ToFileTimeUtc().ToString();//127756704859912816 8 9 dt.ToLocalTime().ToString();//2005-11-5 21:21:25 10 11 dt.ToLongDateSt

mysql中日期函数和日期的加减运算

mysql日期运算,日期函数 DAYOFWEEK(date) 返回日期date的星期索引(1=星期天,2=星期一, --7=星期六).这些索引值对应于ODBC标准. mysql> select DAYOFWEEK('1998-02-03'); -> 3 WEEKDAY(date) 返回date的星期索引(0=星期一,1=星期二, --6= 星期天). mysql> select WEEKDAY('1997-10-04 22:23:00'); -> 5 mysql> selec

0831 模糊查询,排序查询,聚合函数,时间日期函数,数学函数,字符串函数

create database lianxi0720gouse lianxi0720gocreate table student( code int not null,--学号,不可为空 name varchar(10),--学生姓名 sex varchar(10),--性别 banji varchar(10),--班级 yufen decimal(18,2),--语文分数 shufen decimal(18,2),--数学分数 yingfen decimal(18,2),--英语分数)go--

MYSQL 日期函数【转】

MySQL日期时间函数大全 DAYOFWEEK(date) 返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准) mysql> select DAYOFWEEK('1998-02-03'); -> 3 WEEKDAY(date) 返回日期date是星期几(0=星期一,1=星期二,……6= 星期天). mysql> select WEEKDAY('1997-10-04 22:23:00'); -> 5 mysql> select WEEKDAY('1