zoukankan      html  css  js  c++  java
  • JS倒计时特效--JavaScript基础

    1、倒计时特效HTML源码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>倒计时特效</title>
    </head>
    <body>
      <section>
        <div id="CET6"></div>
        <div id="mandarin"></div>
        <div id="Database"></div>
      </section>
    </body>
    <script>
      var nowTime = new Date();
      var setTimeCET6 = new Date("November 25,2017");
      var setTimeMan = new Date("December 16,2017");
      var setTimeDb = new Date("December 9,2017");
      var CET6 = "距离CET6考试只有";
      var Mandarin = "距离普通话考试只有";
      var Db = "距离Access考试只有";
      var dateCET6 = setTimeCET6.getTime() - nowTime.getTime();//date得到的是秒数,单位是ms
      var dateMan = setTimeMan.getTime() - nowTime.getTime();
      var dateDb = setTimeDb.getTime() - nowTime.getTime();
      var timeCet6 = CET6+Math.floor(dateCET6/(1000*60*60*24))+"天!";//最终化为以天为单位;Math.floor()函数四舍五入
      var timeMandarin = Mandarin+Math.floor(dateMan/(1000*60*60*24))+"天!";
      var timeDatabase = Db+Math.floor(dateDb/(1000*60*60*24))+"天!";
      document.getElementById('CET6').innerHTML = timeCet6;
      document.getElementById('mandarin').innerHTML = timeMandarin;
      document.getElementById('Database').innerHTML = timeDatabase;
    </script>
    </html>

    2、效果示例

  • 相关阅读:
    01点睛Spring MVC 4.1-搭建环境
    18点睛Spring4.1-Meta Annotation
    17点睛Spring4.1-@Conditional
    16点睛Spring4.1-TaskScheduler
    15点睛Spring4.1-TaskExecutor
    Zabbix4.0.3解决中文乱码
    A10映射方法
    源码安装zabbix_agent4.0.3
    单机部署redis5.0集群环境
    zabbix系列之九——添加钉钉告警
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7579111.html
Copyright © 2011-2022 走看看