zoukankan      html  css  js  c++  java
  • 倒计时

    // 一月: January = Jan.
    // 二月: February = Feb.
    // 三月: March = Mar.
    // 四月: April = Apr.
    // 五月: May
    // 六月: June = Jun.
    // 七月: July = Jul.
    // 八月: August = Aug.
    // 九月: September = Sep.
    // 十月: October = Oct.
    // 十一月:November = Nov.
    // 十二月:December = Dec.
    // 星期一: Mon. = Monday
    // 星期二: Tues. = Tuesday
    // 星期三: Wed. = Wednesday
    // 星期四: Thur. = Thurday
    // 星期五: Fri. = Friday
    // 星期六: Sat. = Saturday
    // 星期日: Sun. = Sunday
    今天是2017年3月19号,周日,
    今天晚上我们一起来学习“倒计时”这个前端“需求”。
    今天,讲上半部分,就是它的js的业务逻辑的实现;
    然后下周,讲它的reactJs的实现,还有在nodeJs里把它运行起来。其实就是,下周讲一些react + node
    ============
    时间倒数,倒计时,意思 就是到未来的某天,或某个时刻还有多久。
    就例如你问我,从现在,到月底还有几天?
    我回答你,3月底是31号,现在是19号,到本月底还有12天。
    如果你每隔一天或,每一小时,每一分钟,问我一次,我会不断的回答你,
    到本月底还有11天。
    到本月底还有10天。
    到本月底还有9天。
    到本月底还有8天。
    ...
    那么现在看来,倒计时需求就是,
    “以一定的时间间隔,来不断的输出。”
    “从当前时间,到未来确定的某个时间点,”
    “此二者的之间差”。
    实际就是对于 setinterval('fnName()',1000)的使用。
    当然,这是我自己的理解,
    也是我自己分析“实现时间倒数”这个需求,如何去实现的思路。
    //================
    日期啊,时间啊,都是对于Date()对象的操作。
    // Date 对象用于处理日期和时间
    console.dir(info);
    它是以属性和对象的形式来输出信息到控制台。
    首先,date,它们不是字符串,而是日期对象。里面包含着日期信息,和许多方法。
    在js里两个东西相减,会隐式转换成数字。
    那日期date对象转数字就是毫秒数,
    1秒等于1000毫秒,
    //===============
    现在的前端页面,已经成为页面组件的搭建了。
    单纯的纯手写页面结构与组件,有,但不多。
    前端页面,已经成为“一棵前端组件的组件树”!
    <meta charset="utf-8" />
    <script type="text/javascript">
    function counter() {
    var date = new Date(); //Date() 返回当日的日期和时间
    //getFullYear() 方法可返回一个表示年份的 4 位数字
    var year = date.getFullYear();
    console.log(year)
    //new Date(年,月,日,时,分,秒);
    // 月,是从0开始计算的,所以3月要写2
    var date2 = new Date(year, 2, 20);
    // 它是一个日期对象,不是一个日期字符串
    // console.log(date2);
    console.dir(date2);
    // 两个东西相减会隐式转换成数字
    // date对象转数字就是毫秒数
    /* 转换成秒,因为获得的是毫秒 */
    var time = (date2 - date) / 1000;
    console.log(time);
    // 秒转化为小时,分钟,天
    var day = Math.floor(time / (24 * 60 * 60))
    var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
    var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
    var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
    var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
    console.log(str);
    }
    counter();
    // window.setInterval("counter()", 1000);
    </script> 
  • 相关阅读:
    Kibana功能一览
    如何在Java代码中使用SAP云平台CloudFoundry环境的环境变量
    SAP云平台CloudFoundry中的用户自定义变量
    SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么
    ABAP Netweaver, Hybris Commerce和SAP 云平台的登录认证
    ABAP Netweaver和git的快捷方式
    ABAP Netweaver和Cloud Foundry上的环境变量Environment Variable
    如何处理CloudFoundry应用部署时遇到的254错误
    Netweaver工作进程的内存限制 VS CloudFoundry应用的内存限制
    Java实现 LeetCode 514 自由之路
  • 原文地址:https://www.cnblogs.com/pearl8/p/7941714.html
Copyright © 2011-2022 走看看