JS倒计时特效--JavaScript基础
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基础的更多相关文章
- JavaScript——基础知识,开始我们的js编程之旅吧!
JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...
- 前端javascript基础总结(1)js的构成以及数据类型
在日常工作中用到的原生js很少,感觉自己已经把原生的js忘光了,在这里开始总结下js,就从最基础的开始吧!!! JavaScript的组成: 1.ECMAScript:解释器,翻译. 个人理解为就是解 ...
- 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.解压后打开解决方案,解决方案目录: ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- javascript基础入门之js中的结构分支与循环语句
javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...
- javascript基础入门之js中的数据类型与数据转换01
javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM) js中的打印语句: 数据类型 变量 ...
- JavaScript 基础学习(二)js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- 【JavaScript基础】Js的定时器(你想看的原理也在哟)
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- 使用jQuery快速高效制作网页交互特效第一章JavaScript基础
JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...
随机推荐
- firefox在引入vue.js后不支持e=e||window.event的解决办法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- iOS学习——布局利器Masonry框架源码深度剖析
iOS开发过程中很大一部分内容就是界面布局和跳转,iOS的布局方式也经历了 显式坐标定位方式 --> autoresizingMask --> iOS 6.0推出的自动布局(Auto La ...
- JDBC【数据库连接池、DbUtils框架、分页】
1.数据库连接池 什么是数据库连接池 简单来说:数据库连接池就是提供连接的... 为什么我们要使用数据库连接池 数据库的连接的建立和关闭是非常消耗资源的 频繁地打开.关闭连接造成系统性能低下 编写连接 ...
- php实现的短网址算法分享
这篇文章主要介绍了php实现的短网址算法,理论上支持1,073,741,824个短网址,个人使用足够了,需要的朋友可以参考下 每个网址用6个字符代替,(6^32) 最多可以拥有1,073,741,82 ...
- iOS7控制中心会覆盖由下向上的手势
Expect users to swipe up from the bottom of the screen to reveal Control Center. If iOS determines t ...
- 微信小程序AES加密解密
微信小程序 其实在调用一些第三方 js的时候 其实没有大家想的那么复杂,无非就是把原生js调用方式 改为微信小程序 js调用方式 废话不多说直接贴代码 其实就是将原生function 或者 对象 ...
- 4、flask之分页插件的使用、添加后保留原url搜索条件、单例模式
本篇导航: flask实现分页 添加后保留原url搜索条件 单例模式 一.flask实现分页 1.django项目中写过的分页组件 from urllib.parse import urlencode ...
- 创建Maven web工程不能解析EL表达式的解决办法
在web.xml中讲头部改为: <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&qu ...
- Ubuntu14.04上安装Composer
1,查看机子上有没有安装php 2,下载Composer的安装包 3,安装Composer 4,设置Composer全局可访问
- UVa230 Borrowers
原题链接 UVa230 思路 这题输入时有一些字符串处理操作,可以利用string的substr()函数和find_last_of()函数更加方便,处理时不必更要把书名和作者对应下来,注意到原题书名的 ...