• JS 计算时间差,(引入外部字体文件)


    JavaScript Date() 对象:

      new Date() :时间对象,会把当前时间作为其初始值;

      setFullYear() :用于设置月份,可有三个参数,setFullYear(year,month,day);

      setHours() :设置指定时间的小时,可有四个参数,setHours(hour,min,sec,millisec);

      getDate() :返回月份的某一天;

      getMonth() :返回表示月份的数字;

      getFullYear() :返回一个表示年份的 4 位数字;

      getTime() :返回距 1970 年 1 月 1 日之间的毫秒数;

      setFullYear() :设置年份;

      setDate() :设置日;

      点击查看详情

      

    CSS

           @font-face{
                font-family: "Digital-7 Mono";
                src: url('Digital-7Mono.TTF');
            }
            div{
                width: 500px;
            } 
           .contain{
                text-align: right;
                font-size: 18px;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .contain span{
                font-family: "Digital-7 Mono";
                font-size: 36px;
                color: #555;
                padding-left: 10px;
            }       

    HTML

    <div class="contain"></div>

    JS

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var displayMode = 1;
        var time;
    
        $(".contain").click(function(){
            displayMode *= -1;
            Time(time, displayMode);
        });
    
        // 返回不同月份不同天数的方法
        function getDaysInMonth(month) {
            var data = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            return data[month];
        }
    
        // 设置开始时间
        function start(year,month,day,hour,min,sec,mill){
            var starttime =new Date();
            starttime.setFullYear(year,month-1,day);
            starttime.setHours(hour,min,sec,mill);
            time =starttime;
            return time;
        }
        start(2015,2,20,21,0,0,0);
        
        function Time(date,mode){
            var years = NaN;
            var months = NaN;
    
            var current =new Date();
            var seconds =(Date.parse(current) - Date.parse(date)) /1000; //获取时间差的秒数
            var days =Math.floor(seconds / (3600 * 24)); //总天数
    
            seconds = seconds % (3600 * 24);  //总秒数 % 一天的秒数 下面的同理
            var hours =Math.floor(seconds / 3600); 
    
            seconds = seconds % 3600;
            var minutes = Math.floor(seconds / 60);
    
            seconds = seconds % 60;
    
            // 判断假如时分秒小时10的话 前面加0
            (seconds <10)? seconds ="0"+seconds:seconds=seconds;
            (hours <10)? hours ="0"+hours:hours=hours;
            (minutes <10)? minutes ="0"+minutes:minutes=minutes;
    
            if (mode == 1) {
                days = current.getDate() - date.getDate(); //当前日 - 开始日
                if (days < 0) {
                    days += getDaysInMonth(current.getMonth());
                    current.setDate(current.getDate() -1);
                }
                months = current.getMonth() - date.getMonth();
                if (months < 0) {
                    months += 12;
                    current.setFullYear(current.getFullYear() - 1);
                }
                years = current.getFullYear() - date.getFullYear();
            } else {
                days = Math.floor((current.getTime() - date.getTime()) / (1000 * 3600 * 24));
            }
    
            var result = (years > 0 ? "<span class='years'>" + years + "</span> year ":"")
                result += (months >= 0 ? "<span class='months'>" + months + "</span> month ":"");
                result += "<span class='days'>" + days + "</span> day ";
                result += "<span class='hours'>" + hours + "</span> hr "
                result += "<span class='minutes'>" + minutes + "</span> min "
                result += "<span class='seconds'>" + seconds + "</span> sec"
    
            $(".contain").html(result);
        }
        Time(time,displayMode);
        
        setInterval(function(){
            Time(time,displayMode);
        },1000)
    </script>

    不用安装到本地,直接引用外部字体文件

      @font-face{
                font-family: "Digital-7 Mono";
                src: url('Digital-7Mono.TTF');
            }

      URL 是文件的路径

  • 相关阅读:
    vue-cil和webpack中本地静态图片的路径问题解决方案
    vue-cil 中的配置分析
    webpack中mainifest.js vendor.js app.js 三者的区别
    css 中可以继承的属性
    有关正则表达式的Js方法(replace)
    css 常用的几种垂直居中(包括图片)
    如何在Vue中建立全局引用或者全局命令
    删除数组中多个不连续的数组元素的正确姿势
    数据库
    代码片段
  • 原文地址:https://www.cnblogs.com/wyhlightstar/p/6703998.html
Copyright © 2020-2023  润新知