1、倒计时特效HTML源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时特效</title>
</head>
<body>
  <section>
    <div id="CET6"></div>
    <div id="mandarin"></div>
    <div id="Database"></div>
  </section>
</body>
<script>
  var nowTime = new Date();
  var setTimeCET6 = new Date("November 25,2017");
  var setTimeMan = new Date("December 16,2017");
  var setTimeDb = new Date("December 9,2017");
  var CET6 = "距离CET6考试只有";
  var Mandarin = "距离普通话考试只有";
  var Db = "距离Access考试只有";
  var dateCET6 = setTimeCET6.getTime() - nowTime.getTime();//date得到的是秒数,单位是ms
  var dateMan = setTimeMan.getTime() - nowTime.getTime();
  var dateDb = setTimeDb.getTime() - nowTime.getTime();
  var timeCet6 = CET6+Math.floor(dateCET6/(1000*60*60*24))+"天!";//最终化为以天为单位;Math.floor()函数四舍五入
  var timeMandarin = Mandarin+Math.floor(dateMan/(1000*60*60*24))+"天!";
  var timeDatabase = Db+Math.floor(dateDb/(1000*60*60*24))+"天!";
  document.getElementById('CET6').innerHTML = timeCet6;
  document.getElementById('mandarin').innerHTML = timeMandarin;
  document.getElementById('Database').innerHTML = timeDatabase;
</script>
</html>

2、效果示例

JS倒计时特效--JavaScript基础的更多相关文章

  1. JavaScript——基础知识,开始我们的js编程之旅吧!

    JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...

  2. 前端javascript基础总结(1)js的构成以及数据类型

    在日常工作中用到的原生js很少,感觉自己已经把原生的js忘光了,在这里开始总结下js,就从最基础的开始吧!!! JavaScript的组成: 1.ECMAScript:解释器,翻译. 个人理解为就是解 ...

  3. ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础,单线程,跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js:使用 JavaScript 生成

    ASP.NET Boilerplate 学习   1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...

  4. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  5. javascript基础入门之js中的结构分支与循环语句

    javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...

  6. javascript基础入门之js中的数据类型与数据转换01

    javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量      ...

  7. JavaScript 基础学习(二)js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  8. 【JavaScript基础】Js的定时器(你想看的原理也在哟)

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

  9. 使用jQuery快速高效制作网页交互特效第一章JavaScript基础

    JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...

随机推荐

  1. JS 特殊字符的验证的问题

    个人的JS 的收集方便下次的使用做百度查询: 1. 特殊字符的验证: var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].&l ...

  2. SDN第二次作业

    作业链接 阅读文章<软件定义网络(SDN)研究进展>,并根据所阅读的文章,书写一篇博客,回答以下问题(至少3个): 为什么需要SDN?SDN特点? 随着网络规模的不断扩大,封闭的网络设备内 ...

  3. python基础(str,list,tuple)

    python是一门动态解释型的强类型定义语言(先编译后解释) 动态类型语言 动态类型的语言编程时,永远也不用给任何变量指定数据类型,该语言会在你第一次赋值给变量时,在内部将数据类型记录下来 解释型 程 ...

  4. 用Spring Tools Suite(STS)开始一个RESTful Web Service

    spring.io官方提供的例子Building a RESTful Web Service提供了用Maven.Gradle.STS构建一个RESTFul Web Service,实际上采用STS构建 ...

  5. Python数据分析学习-re正则表达式模块

    正则表达式 为高级的文本模式匹配.抽取.与/或文本形式的搜索和替换功能提供了基础.简单地说,正则表达式(简称为 regex)是一些由字符和特殊符号组成的字符串,它们描述了模式的重复或者表述多个字符,于 ...

  6. Chrome浏览器的自动安装下载工具

    链接 https://www.google.com/chrome/browser/desktop/index.html?brand=CHWL&utm_campaign=en&utm_s ...

  7. git命令行工作的正确姿势

    git命令行创建并提交新分支到mater分支的常规步骤 git branch new_branch git status 查看修改的文件 git add changed_files git commi ...

  8. Linux命令之tar-rsync

    一.tar命令 可以对文件和目录进行打包压缩(相较于zip.gzip.bzip2不能对目录进行压缩,tar是一大优势) 用途:制作归档文件.释放归档文件 基本格式: 压缩---> tar  [选 ...

  9. Python个人总结_02

    个人学习总结: python 第二课 解释型和编译型语言 计算机是不能够识别高级语言的,当我们运行一个高级语言的时候,需要将高级语言 翻译成计算机能够读懂的机器语言.这个过程分为两类,一个是编译,一个 ...

  10. 基于微软企业库的AOP组件(含源码)

    软件开发,离不开对日志的操作.日志可以帮助我们查找和检测问题,比较传统的日志是在方法执行前或后,手动调用日志代码保存.但自从AOP出现后,我们就可以避免这种繁琐但又必须要实现的方式.本文是在微软企业库 ...