实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript-日期对象|倒计时跳转</title>
<style type="text/css">
p{
height: 50px;
width: 300px;
margin:100px auto;
}
span{
display: inline-block;
height: 50px;
width: 50px;
line-height: 50px;
color: red;
font-size: 18px;
text-align: center;
}
button{
width: 180px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<button onclick="alert(getDates());">单击显示日期</button>
<button ondblclick="alert(getNowTimes());">双击显示时间</button>
<button onclick="setInterval('fnDetime()',1000);">倒计时变色并跳转</button>
<p>
还剩<span>5</span>秒跳转至<a href="http://www.php.cn">中文网</a>
</p>
<script type="text/javascript">
var d=new Date();//获取当前系统时间
document.write(d);
//2019-3-28 日期格式化输出
function getDates(){
var d=new Date();
var year=d.getFullYear();//获取年份
var month=d.getMonth()+1;//获取月份
var day=d.getDate();
return year+'-'+month+'-'+day;
}
//getDates();
function getNowTimes(){
var d=new Date();
var h=d.getHours();//0~23的整数
var m=d.getMinutes();//0～59分钟
var s=d.getSeconds();//0～59秒钟
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
return h+':'+m+':'+s;
}
//[案例]随机选择颜色,十六进制颜色
function roundColor(){
var bg='#'//背景色
var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
bg+=r+g+b;
document.getElementsByTagName('body')[0].style.background=bg;
}
//倒计时,5秒倒计时，跳转至PHP中文网
var Espan=document.getElementsByTagName('span')[0];
var i=4;
function fnDetime(){//倒计时5秒，每1000毫秒更新一次
if(i>0){
Espan.innerHTML=i;
roundColor();
i--;
}else{//倒计时结束，进行页面跳转
window.location.href="http://www.php.cn";
}
}
//setInterval("fnDetime()",1000);//定时刷新页面 1秒=1000毫秒;
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
