1、获取当前系统时间
屏幕快照 2018-02-01 下午11.28.30.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="font-size: 80px;">
<script type="text/javascript">
function fnTime() { // 函数：获取当前时间
var myTime = new Date()
var iYear = myTime.getFullYear(); // 年
var iMonth = myTime.getMonth()+1; // 月
var iDate = myTime.getDate(); // 日
var iWeek = myTime.getDay(); // 星期
var iHours = myTime.getHours(); // 时
var iMin = myTime.getMinutes(); // 分
var iSec = myTime.getSeconds(); // 秒
// 转换星期
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 str = ''; // 设了一个"空"、可简化
str = iYear +'年'+iMonth+'月'+iDate+'日 '+iWeek +' '+toTwo(iHours)+':'+toTwo(iMin)+':'+toTwo(iSec);
var oBody = document.body;
oBody.innerHTML = str;
}
fnTime()
setInterval(fnTime,1000); // 调用函数不写 括号
function toTwo(num) { // 函数：空位补零 09：00：00
if (num < 10) {
return '0' + num;
}else {
return num;
}
}
</script>
</body>
</html>
2、倒计时(天数,时,分,秒)
屏幕快照 2018-02-02 上午12.01.35.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="time"></h1> <!-- 倒计时显示的位置 -->
<script type="text/javascript">
window.onload =function () {
function timer() {
//计算相差多少毫秒 未来时间.需要传参.月份"month-1" 当前时间
var minusTime = (new Date(2018,1,15,24,0,0)) - (new Date());
//获取元素
var days = parseInt(minusTime / 86400000); //1天 = 86400000毫秒
var hours = parseInt((minusTime % 86400000) / 3600000);//1小时 = 3600000毫秒
var minutes = parseInt((minusTime % 3600000) / 60000);//1分钟 = 60000毫秒
var seconds = parseInt((minusTime % 60000) / 1000);//1秒 = 1000毫秒
//空位补零.
function checkTime(i) {//将0-9的数字前面加上0. 1变为01
if (i < 10) {
return '0' + i;
}else {
return i;
}
}
//带入函数,获取新元素
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
//获取最终时间
document.getElementById('time').innerHTML = '距离春节： '+ days + "天 " + hours + ":" + minutes + ":" + seconds;
}
timer();//立即调用这个函数。解决延时1sの问题
setInterval (timer,1000);//将以上所有函数带入'间隔性定时器（A，1000）'
}
</script>
</body>
</html>
3、动画时钟（图片版）
屏幕快照 2018-02-02 上午12.09.32.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
margin: 0;
padding: 0;
position: relative;
height: 170px;
overflow: hidden;
}
li{
list-style: none;
width: 120px;
height: 170px;
position: relative;
float: left;
}
div{
height: 340px;
position: absolute;
top: 0;
}
img{
width: 120px;
height: 170px;
vertical-align: top;
}
</style>
</head>
<body>
<ul>
<li>
<div><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div>
</li>
<li>
<div><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div>
</li>
<li>
<img src="img/colon.jpg" alt="">
</li>
<li>
<div><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div>
</li>
<li>
<div><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div>
</li>
<li>
<img src="img/colon.jpg" alt="">
</li>
<li>
<div><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div>
</li>
<li>
<div><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div>
</li>
</ul>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
var imgs = document.querySelectorAll('li>img');
var old = getTime();
//开始先调用一下，解决页面刚打开的时候时间延时显示的问题。
for(var i=0;i<divs.length;i++){
divs[i].getElementsByTagName('img')[0].src = 'img/'+old[i]+'.jpg';
}
// autoPlay();
//开定时器自动更新时间
setInterval(function(){
//点的闪烁
for(var i=0;i<imgs.length;i++){
imgs[i].src = 'img/colon1.jpg';
}
//延时半秒点的闪烁
setTimeout(function(){
for(var i=0;i<imgs.length;i++){
imgs[i].src = 'img/colon.jpg';
}
}, 500)
autoPlay();
}, 1000)
function getTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
//拼成时间字符串
var time = toTwo(h)+toTwo(m)+toTwo(s);
return time;
}
function autoPlay(){
var time = getTime();
// '232020'
// '232019'
for(var i=0;i<time.length;i++){
if(old[i] !== time[i]){
slied(i,time);
}
}
old = time;
}
//图片切换
function slied(n,time){
var imgs = divs[n].getElementsByTagName('img');
imgs[1].src = 'img/'+time[n]+'.jpg';
move(divs[n],'top',-170,400,function(){
imgs[0].src = 'img/'+time[n]+'.jpg';
divs[n].style.top = '';
})
}
//补零
function toTwo(n){
return n<10?'0'+n:''+n;
}
function move(obj,attr,target,duration,callback){
var b = parseFloat(getComputedStyle(obj)[attr]);
var c = target - b;
var d = duration;
var now = new Date().getTime();
obj[attr] = setInterval(function(){
var t = new Date().getTime() - now;
var value = b + c / d * t;
obj.style[attr] = value+"px";
if(t >= d){
clearInterval(obj[attr]);
obj.style[attr] = target+"px";
callback&&callback();//当到达目标值的时候执行回调函数
}
},30)
}
</script>
</body>
</html>
