原生Js的几种时间效果

最新推荐文章于 2023-11-26 10:36:26 发布

my_coding2015

最新推荐文章于 2023-11-26 10:36:26 发布

阅读量554

点赞数

分类专栏： Js+Html+css

本文链接：https://blog.csdn.net/my_coding2015/article/details/52130679

版权

Js+Html+css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

<!--
Time:2016.8.5
Author:Joel

1.获取对象
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>