JavaScript实现简单日期特效

JavaScript之日期特效的具体代码,供大家参考,具体内容如下

直接上代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

#date{

width: 450px;

height: 300px;

background-color: darkorange;

border-radius: 10px;

margin: 100px auto;

}

#nowDate{

width: 450px;

height: 60px;

line-height: 60px;

text-align: center;

color: #fff;

font-size: 26px;

}

#day{

width: 200px;

height: 200px;

line-height: 200px;

background-color: orchid;

margin: 0 auto;

text-align: center;

}

</style>

</head>

<body>

<div id="date">

<p id="nowDate"></p>

<p id="day"></p>

</div>

<script type="text/javascript">

// 获取标签

var nowDate = document.getElementById("nowDate");

var day = document.getElementById("day");

// 用定时器 更新时间的变化

setInterval(nowNumTime,1000);

nowNumTime();

function nowNumTime(){

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

var temp = '' + (hour>12 ? hour-12:hour);

var year = now.getFullYear();

var month = now.getMonth();

var d = now.getDate();

var week = now.getDay();

console.log(week); //索引

var weeks = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

// console.log(temp);

if (hour ===0){

temp = '12';

}

temp = temp + (minute <10 ? ':0':":"+minute);

temp = temp + (second <10 ? ':0':":"+second);

temp = temp + (hour>=12 ? ' P.M.':' A.M.');

temp = `${year}年${month}月${d}日 ${temp}${weeks[week]}`;

// console.log(temp);

nowDate.innerHTML = temp;

}

</script>

</body>

</html>

实现效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 JavaScript实现简单日期特效 的全部内容, 来源链接: utcz.com/p/220218.html

回到顶部