JS 倒计时 Date
代码如下:
- <style type="text/CSS">
- * {
- margin: 0;
- padding: 0;
- }
- #box {
- border: 1px solid cyan;
- background-color: #000;
- height: 50px;
- width: 500px;
- margin: 100px auto 0;
- border-radius: 20px;
- text-align: center;
- }
- #sj {
- margin: 5px 0 5px 0;
- color: darkgray;
- width: 500px;
- border-radius: 20px;
- height: 40px;
- font-size: 30px;
- text-shadow: 2px 10px 5px #FFFFF0;
- }
- #djs {
- height: 120px;
- width: 500px;
- color: darkgray;
- text-align: center;
- border-radius: 20px;
- margin: 100px auto 0;
- background-color: #000;
- border: 1px solid cyan;
- }
- </style>
- <body>
- <div id="box">
- <p id="sj"></p>
- </div>
- <h1 id="djs"></h1>
- <script type="text/javascript">
- var time = new Date;
- // 加上定时器, 让它每隔一秒刷新
- setInterval(function() {
- var time = new Date;
- var year = time.getFullYear();
- var month = time.getMonth() + 1;
- var dat = time.getDate();
- var hours = time.getHours();
- var mm = time.getMinutes();
- var ss = time.getSeconds();
- sj.innerText = year + "年" + month + "月" + dat + "日" + hours + "时" + mm + "分" + ss + "秒";
- }, 1000);
- // 倒计时:
- // 我们来定义一个未来时间 用它来进行倒计时.
- setInterval(function(){
- var time = new Date;
- var future = new Date(2019, 04, 02, 0, 0, 0);
- var p = (future - time) / 1000;
- // 时分秒转换公式
- var day = Math.floor(p / 86400);
- var h = Math.floor(p % 86400 / 3600);
- var m = Math.floor(p % 86400 % 3600 / 60);
- var s = Math.floor(p % 60);
- // 我们加了 </br > 标签, 所以要改用 djs.innerhtml
- djs.innerHTML ="距离 4 月 2 号还有:</br></br>"+ day + "日" + h + "时" + m+ "分" + s + "秒";
- },1000);
- // 另外有两个写很不错打的可以直接引用 http://momentjs.cn day.JS
- </script>
- </body>
来源: http://www.bubuko.com/infodetail-3035398.html