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 是文件的路径

JS 计算时间差,(引入外部字体文件)的更多相关文章

  1. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  2. css自定义字体----使用外部字体文件

    css外部自定义字体 给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单 ...

  3. HTML引入外部字体

    HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...

  4. IoC容器-Bean管理XML方式(引入外部属性文件)

    IoC操作Bean管理(引入外部属性文件) 1,直接配置数据库信息 (1)配置德鲁伊连接池 (2)引入德鲁伊连接池依赖jar包 2,通过引入外部属性文件配置数据库连接池 (1)创建外部属性文件,pro ...

  5. CSS引入外部字体方法,附可用demo

    有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...

  6. vue项目引入外部字体

    1.UI设计图有"华文黑体",担心客户端没有该字体,将"huawen.ttf"字体文件,放入项目中: 2.创建一个font.scss(或font.css)文件: ...

  7. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

  8. css如何引入外部字体?

    第一步,在CSS中引入字体并给名字取一个合适的名字,如下 1 2 3 4 5 6 7 @font-face {     /* font-properties */     font-family: p ...

  9. 页面引入外部字体ttf,如何提取所需要的ttf字体或者加载过慢的解决方法-1127更新

    最近几天编写手机端的页面之后,文中需要华文行楷字体,在网上下载后,引入到了自己的前端页面,以为没有什么事了,继续码代码 @font-face { font-family:huawen; src: ur ...

随机推荐

  1. SHELL脚本进阶

    一.读取参数 $0 程序名称$1 第一个参数$2 第二个参数,依次类推可以使用 basename 来读取程序名称:basename $0 可以使用 dirname 来读取第一个参数的目录:dirnam ...

  2. C#-WebForm-组合查询(Queryable延迟查询、Intersect交集)、分页展示基础

    组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...

  3. 3.1)DFM-塑胶件设计总章

    本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...

  4. 牛客Wannafly挑战赛26E 蚂蚁开会(树链剖分+线段树)

    传送门 题面描述 一颗n个节点的树,m次操作,有点权(该节点蚂蚁个数)和边权(相邻节点的距离). 三种操作: 操作1:1 i x将节点i的点权修改为x.(1 <= i <= n; 1 &l ...

  5. Dijkstra+优先队列 堆优化

    关于堆优化 传统\(Dijkstra\),在选取中转站时,是遍历取当前最小距离节点,但是我们其实可以利用小根堆(STL的priority_queue)优化这个过程,从而大大降低复杂(\(O(V2+E) ...

  6. 基于nightmare的美团美食商家爬虫实践

    前言美团商家页分析需要爬取的数据有(这里没有按人数爬)爬虫工具选取pysipderscrapynightmare同步任务js动态加载中断继续爬坑总结示例代码 前言 上学的时候自己写过一些爬虫代码,比较 ...

  7. 第2章—装配Bean—通过XML装配Bean

    通过XML装配Bean ​ 尽管我们在生成Bean的过程中可以用到很多方法,但我们依然需要Spring的XML配置来完善更多的需求,下面就来介绍下XML装配Bean的过程是怎样的. 3.1创建XML配 ...

  8. Spring由于web配置导致的spring配置文件找不到的问题的解决方案

    在把某项技术整合到Spring中的时候,我们时常会发现报如下错误: org.springframework.beans.factory.BeanCreationException: Error cre ...

  9. 深度学习(八) Batch Normalization

    一:BN的解释:  定义: 顾名思义,batch normalization嘛,就是“批规范化”咯.Google在ICML文中描述的非常清晰,即在每次SGD时,通过mini-batch来对相应的act ...

  10. 利用 ICEpdf 快速实现 pdf 文件预览功能

    之前工作中,需要实现一个在线预览pdf的功能,一开始用的的 jQuery-media 插件来实现的,后来感觉有点慢,就继续寻找更好的替代品,直到遇见了 ICE pdf... ICEpdf (官网:ht ...