原生Js的几种时间效果

来源：互联网发布：淘宝助手安卓版编辑：程序博客网时间：2024/06/05 11:27

前言：
1.这篇博客也要算在样式里面，只是简单的写了一下几种时间的处理方式。比如倒计时，标准时间，倒计时的变种等等。这些样式在各大电商都有应用，算是比较基础是用的部分。
2.在代码构建过程中还是遇到了不少困难，大多是编码习惯造成了。简单的东西也要靠不断的练习才能做到胸有成竹，下面是代码部分，欢迎交流。

<!--Time:2016.8.5Author:Joel1.获取对象var date = new Date();2.方法getDate() 返回日期(1-31)getMonth() (0-11)getFullYear() 返回完整年份(2016)getYear() 返回年份(16)getDay() 返回星期几(0-6)getHours() 返回小时数(0-23)getMinutes() 返回分钟数(0-59)getSeconds() 返回秒数getTime() 返回毫秒数3.时间setTimeout(function,time(ms))4.数学Math.floor() 向下取整Math.ceil() 向上取整--><!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><!--完整时间，分秒为1位数时前面补充0-->     <!--     <script>        window.onload = function(){            showTime();        }        function showTime(){            var week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");            var date = new Date();            //alert(date); 获取标准时间            var year = date.getFullYear();            var month = date.getMonth() + 1;            var day = date.getDate();            var hour = date.getHours();            var min = checkTime(date.getMinutes());            var sec = checkTime(date.getSeconds());            var result = document.getElementsByClassName("show");            result[0].innerHTML = year + "年" + month + "月" + day + "日" + week[date.getDay()] + hour + ":" + min + ":" + sec;            setTimeout(showTime,500);            }        function checkTime(obj){            if(obj < 10){                obj = "0" + obj;            }            return obj;        }    </script> --><!--倒计时效果--><!--     <script>        window.onload = function(){            var start = new Date();            var end = new Date("2017,4,4");            var left = Math.ceil((end.getTime() - start.getTime())/ (24 * 60 * 60 * 1000));            var result = document.getElementsByClassName("show");            result[0].innerHTML =left;        }    </script> --><!--限时抢购--> <!--     <script>      window.onload = function(){        showTime();        }        function showTime(){            var end = new Date("2017/5/15,12:20:12");            var start = new Date();            var left = parseInt((end.getTime() - start.getTime()) / 1000); //换算成秒数            var d = parseInt(left / (24 * 60 * 60));            var h = parseInt((left / (60 * 60)) % 24);            var m = parseInt((left / 60 )%  60);            var s = parseInt(left % 60);            var result = document.getElementsByClassName("show");            if(left <= 0){               result[0].innerHTML = "团购结束";            }            else{                result[0].innerHTML = d + "天" + h + "小时" + m + "分钟" + s + "秒";            }            setTimeout(showTime,500);        }      </script>  -->  </head><body>    <div class = "show">position:</div></body></html>

小结
1.一些简单数学方法的熟记，实际上c＋＋中也有几乎一样的方法。
2.取模运算的妙用，基本上就是循环队列的那些。
3.数组的套用和初始化处理。
4.getElementsByClassName还要强调一遍，返回的是nodelist需要用数组的方法处理。

0 0