JavaScript电子时钟+倒计时
JavaScript时间类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子时钟</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 200px;
height: 100px;
background-color: black;
}
#time{
color: #fff;
display: block;
font-size: 24px;
margin: 0 auto;
padding-top: 20px;
/*border: 1px solid red;*/
text-align: center;
width: 100px;
}
#timer{
color: green;
display: block;
font-size: 18px;
margin: 0 auto;
padding-top: 10px;
/*border: 1px solid red;*/
text-align: center;
/*width: 100px;*/
}
</style>
</head>
<body>
<div id="wrap">
<span id="time"></span>
<span id="timer"></span>
</div>
<script type="text/javascript">
var time =document.getElementById("time");
var timer =document.getElementById("timer"); setInterval(function() { var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var years = date.getYear();
var dates = date.getDate();
var monts = date.getMonth()+1;
var day = date.getDay();
var parses = date.getMilliseconds()%60; switch(day){
case 0:
day="日";
case 1:
day="一";
case 2:
day="二";
case 3:
day="三";
case 4:
day="四";
case 5:
day="五";
case 6:
day="六";
}
//如果秒数小于十，在秒数面前连接一个0
if(seconds < 10) {
seconds = "0" + seconds;
}
//如果分钟数小于十，在分钟数面前连接一个0
if(minutes < 10) {
minutes = "0" + minutes;
}
//如果小时数小于十，在小说数面前连接一个0
if(hours < 10) {
hours = "0" + hours;
}
if(years<1900) {
years = years+1900;
}
if(dates<10) {
dates = "0" + dates;
}
if(monts<10) {
monts = "0" + monts;
}
if(parses<10) {
// parses = "0" + parses;
} timer.innerHTML = years +"年" +monts+ "月" +dates +"号"+"星期"+day;
time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
// date.getTime()//返回的是一个从1970年到当前的毫秒数（时间戳）（ms）
// date.getMonth()//返回的是月份，从0开始算
// date.getFullYear(); },10)
</script>
</body>
</html>
2.倒计时
<!doctype html>
<html>
<meta charset="utf-8">
<title>倒计时</title>
<head> <style type="text/css">
*{
margin: 0;
padding: 0; }
.wrap{
width: 350px;
height: 100px;
background-color: black;
}
#dates{
color: #fff;
margin-top: 10px;
display: block;
margin-left: 15px;
}
p{
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<p>距离2016年02月08号00时00分00秒春节倒计时：</p>
<!-- <p>距离2016年01月07号23时59分59秒倒计时：</p> -->
<span id="dates"></span>
</div>
<script type="text/javascript">
var dates = document.getElementById("dates");
function getRTime(){
var EndTime= new Date('2016/02/07 23:59:59'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime(); var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
var p=Math.floor(t%60);
if(d<10){
d="0"+d;
}
if(h<10){
h="0"+h;
}
if(m<10){
m="0"+m;
}
if(s<10){
s="0"+s;
}
if(p<10){
p="0"+p;
} dates.innerHTML=d+ "日" + h + "小时"+ m +"分" + s +"秒"+p+"毫秒";
}
setInterval(getRTime,1);
</script>
</body>
</html>
JavaScript电子时钟+倒计时的更多相关文章
- Javascript 电子时钟源码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JS实现电子时钟
目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...
- 如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
- 桌面小部件----LED电子时钟实现
桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...
- Qt - 与众不同的电子时钟
Qt的电子时钟是个老掉牙的demo了,但是利用lcdNumber显示的样子非常老土(下图第一个显示效果),一看就知道是从qt帮助文档里摘出来的example,毫无新意. 美化一下系统时钟,抛开固有控 ...
- [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板 一块 2.DS3231 ...
- 3分钟利用TurnipBit制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...
- Micropython TurnipBit 电子时钟 青少年编程入门
电子时钟是一个很常用但是制作非常简单的小玩具了,对于Micropython初学者来说,制作一个电子时钟是非常简单又容易检验自己学习成果的实验了.TurnipBit相比于其他开发板,制作电子时钟就更加简 ...
- MFC桌面电子时钟的设计与实现
目录 核心技术 需求分析 程序设计 程序展示 (一)核心技术 MFC(Micosoft Foundation Class Libay,微基础类库)是微基于Windows平台下的C++类库集合,MFC包 ...
随机推荐
- 微信网页版APP - 网页微信客户端电脑版体验
微信网页版很早就出来了,解决了很多人上班不能玩手机的问题.微信电脑版-网页微信客户端,直接安装在桌面的微信网页版,免去了开浏览器的麻烦.双击就启动了,和其他的应用程序一样:运行过程中可以隐藏在桌面右下 ...
- Shell入门教程：Shell函数的返回值
shell函数返回值一般有3种方式: 1.return语句(默认的返回值) shell函数的返回值可以和其他语言的返回值一样,通过return语句返回. 比如: #!/bin/bash functio ...
- DB2表的重组
DB2在存储大数据的时候,遇到一个问题,将数据导入表中保存不了,最后是重组后才解决. 下面是从IBM官网上搜集的资料: 官网地址:http://publib.boulder.ibm.com/infoc ...
- Python 中的@修饰符作用
在Python 2.4以上的的函数中偶尔会看到函数定义的上一行有@functionName的修饰,这一下这个语法细节,其实这有点像C语言带参数的宏操作,解释器读到这样的修饰之后,会先解析@后的内容,直 ...
- java基本算法之冒泡排序
冒泡排序:是一种较简单的排序算法.它会遍历若干次要排序的数列,每次遍历时,它都会从前往后依次的比较相邻两个数的大小:如果前者比后者大,则交换它们的位置.这样,一次遍历之后,最大的元素就在数列的末尾! ...
- ABAP 订单转交货单
*& Report ZSDR025 *& *&---------------------------------------------------------------- ...
- ASM:《X86汇编语言-从实模式到保护模式》第16章：Intel处理器的分页机制和动态页面分配
第16章讲的是分页机制和动态页面分配的问题,说实话这个一开始接触是会把人绕晕的,但是这个的确太重要了,有了分页机制内存管理就变得很简单,而且能直接实现平坦模式. ★PART1:Intel X86基础分 ...
- GIT学习
git init git add . git commit -m "" git status git diff 工作区->版本库->暂存区stage.master分支. ...
- 【python】装饰器
来源:廖雪峰 看了好多次装饰器,发现还是廖老师讲得好,能让我看懂..... 下面是一段装饰器代码 @log def now(): " 它的含义等价于 def now(): " no ...
- java面试题及答案（转载）
JAVA相关基础知识1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时 ...