|
用JS实现XXXX年XX月XX日 XX时XX分XX秒 效果：
代码Html：
<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>时间显示上课</title>
????<link?rel="stylesheet"?href="css/style.css">
</head>
<body>
????<div?class="container">
????????<span?id="time">0000年00月00日?00时00分00秒</span>
????</div>
????<div?class="btngroup">
????????<button?id="start"?onclick="but1()">开始</button>
????????<button?id="stop"?onclick="but2()">暂停</button>
????</div>
????<script?src="js/script.js"></script>
</body>
</html>
代码css：
@charset?"utf-8";
/*?CSS?Document?*/
*{
????margin:?0;
????padding:?0;
}
body{
????background:?#368cef;
????color:?#fff;
}
.container{
????margin:?100px?auto;
????text-align:?center;
????font-size:?4rem;
????font-weight:?300;
}
.container?span{
????display:?inline-block;
}
.btngroup{
????text-align:?center;
}
.btngroup?button{
????margin:?0px?10px;
????padding:?30px?100px;
????border:none;
????border-radius:?5px;
????font-size:?2rem;
????color:#fff;
????cursor:?pointer;
}
.btngroup?button:first-child{
????background:?rgb(0,?255,?157);
}
.btngroup?button:last-child{
????background:?#e00202;
}
代码js：
//?JavaScript?Document
var?timer=null;
function?but1()
{
????var?o;
????var?oDay?=?new?Date();
????var?a?=?oDay.getHours();
????var?b?=?oDay.getMinutes();
????var?c?=?oDay.getSeconds();
????var?d?=?oDay.getFullYear();
????var?f?=?oDay.getMonth()+1;
????var?g?=?oDay.getDate();
???
????f?=?cTime(f);
????b?=?cTime(b);
????c?=?cTime(c);
????o?=?a+":"+b+":"+c;
????//?console.log(o);
????document.getElementById("time").innerHTML=d+"年"+f+"月"+g+"日"+o;
????t=setTimeout('but1()',1000);
}
function?but2()
{
????clearInterval(t);
}
function?cTime(i)
{
????if(i<10)
????{
????????i="0"+i;
????}
????return?i;
}
这是我所学到的，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教（大神勿喷）。
|