javascript实例——时间日期篇(包含5个实例)
本来想在网上找一些js实例来练练手,结果发现一本书《突破JavaScript编程实例五十讲》,看了下内容还不错,就下了下来;
后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的,代码运行之后,有些代码可以运行,有些代码已经失效,原因是其所用的一些语言是已经淘汰的了。
其次就是由于是很早之前写的,那时候可能还没有css,js,html分离的想法,都是杂糅在一起的,看起来很不舒服。
还有就是,代码末尾都是不带分号的,还有各种不加关键字var的隐性全局变量等,都影响了程序的整洁性,简洁性。
于是就想,要不我把他的代码重新编写,来实现书中的要求。
在此,也对该书的作者马健兵等编著表示致敬,感谢他们的辛苦编著。
由于空间的限制,就不将js,css以单独文件存储了,全部都在html文件中,但已分离。
1、指定位置的时钟显示
时钟始终显示在网页的正中间,12小时制。
效果图:
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>指定位置的时钟</title>
<style>
body{
font-size: 30px;
font-family: Arial;
background: #fef4d9;
}
#Current-time{
color:#66ff00;
font-size: 30px;
}
#liveclock{
position:absolute;
top:50%;
left: 50%;
width: 250px;
height: 100px;
margin: -50px 0 0 -125px;
}
p{
text-align: center;
color:#ff00ff;
margin: 0px;
}
</style>
</head> <body>
<div id="liveclock" >
<div id="show"></div>
</div>
<script > function display()
{ var Digital=new Date();
var hours=Digital.getHours();
var minutes=Digital.getMinutes();
var seconds=Digital.getSeconds();
var dn="AM"; if(hours>12) //改成12小时制的
{
dn="PM";
hours=hours-12;
}
if(hours==0)
hours=12;
if(minutes<=9)
minutes="0"+minutes; //改成两位数的显示
if(seconds<=9)
seconds="0"+seconds; var myclock="<b><p id='Current-time'>Current time is:</p><p>"+hours+":"+minutes+":"+seconds+" "+dn+"</p></b>";
var liveclock=document.getElementById("liveclock");
liveclock.innerHTML=myclock;
setTimeout("display()",1000);
}
display(); </script>
</body>
</html>
2、表针式时钟
由于书上的代码太老了,看不懂,自己重新写了一份。效果图如下:
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表针式时钟</title>
<style>
body{
background: #fef4d9;
}
#time{
position: absolute;
width: 212px;
height: 216px;
top:50%;
left: 50%;
margin: -108px 0 0 -106px;
border: 2px solid yellow;
}
.timeNum{
position: absolute;
}
#pt0{
position: absolute;
top:20px;
left: 105px;
border: 4px solid red;
height: 90px;
z-index: 1px;
}
#pt1{
position: absolute;
top:35px;
left: 105px;
border: 4px solid blue;
height: 75px;
z-index: 100px;
}
#pt2{
position: absolute;
top:50px;
left: 105px;
border: 4px solid yellow;
height: 60px;
z-index: 110px;
}
</style> </head>
<body>
<div id="time">
<div id="c0" class="timeNum" > </div>
<div id="c1" class="timeNum"><b>1</b></div>
<div id="c2" class="timeNum"><b>2</b></div>
<div id="c3" class="timeNum"><b>3</b></div>
<div id="c4" class="timeNum"><b>4</b></div>
<div id="c5" class="timeNum"><b>5</b></div>
<div id="c6" class="timeNum"><b>6</b></div>
<div id="c7" class="timeNum"><b>7</b></div>
<div id="c8" class="timeNum"><b>8</b></div>
<div id="c9" class="timeNum"><b>9</b></div>
<div id="c10" class="timeNum"><b>10</b></div>
<div id="c11" class="timeNum"><b>11</b></div>
<div id="c12" class="timeNum"><b>12</b></div>
<div id="pt0" > </div>
<div id="pt1" ></div>
<div id="pt2" ></div>
</div>
</body>
<script language=javascript> function getid(id){
return document.getElementById(id);
} //将数字以圆形的形式显示在屏幕上。根据三角函数的计算
function clockNum(){
for (var i=1; i<13;i++){
var c1=getid("c"+i);
angle=i*30/360*Math.PI*2;
c1.style.top=0+(100-Math.cos(angle)*100)+"px";
c1.style.left=100+Math.sin(angle)*100+"px";
}
} function clockRotate(){ //获取当前的时间
var start= new Date();
var H=start.getHours();
var M=start.getMinutes();
var S=start.getSeconds(); //设置其旋转的角度,分针每次6度,秒针每次6度,时针每次0.5度
var mDu=M*6;
var hDu=M*0.5+H*30;
var sDu=S*6;
var pt0=getid("pt0");
var pt1=getid("pt1");
var pt2=getid("pt2"); //设置其绕末端旋转,宽度是在中间,高度是在整个高度的末尾,采用百分数的形式
pt0.setAttribute('style',''+'transform:rotate('+ sDu +'deg); '+'transform-origin: center 93%;');
pt1.setAttribute('style',''+'transform:rotate('+ mDu +'deg); '+'transform-origin: center 94%;');
pt2.setAttribute('style',''+'transform:rotate('+ hDu +'deg); '+'transform-origin: center 95%;');
} //每隔1毫秒检测一次
setInterval(clockRotate,100); function init(){
clockNum();
}
init();
</script>
</html>
3、带按钮开关的form时钟
采用按钮的形式进行控制,按下开,显示时间和日期,按下关,则清空。效果图如下
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带按钮开关的Form时钟</title>
<style>
body{
background: #aebcdf;
}
form{
position:absolute;
left:50;
top:50;
z-index:5;
}
input{
color:red;
}
input[type="text"]{
color: black;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid yellow;
width: 220px;
height: 42px;
padding: 10px;
}
</style>
</head> <body>
<div class="center">
<form name="clock" >
<input type="text" name="disp" value="" size=30 onFocus="this.blur()" ><br>
<input type="button" name="rad" value="off" id="offbtn" >关
<input type="button" name="rad" value=" on" id="onbtn">开
</form>
<div>
</body>
<script>
//公共事件
var common={
//获取id
getid:function (id){
return document.getElementById(id);
}, //绑定事件
on:function (element,eventName,listener){
if (element.addEventListener){
element.addEventListener(eventName,listener,false);
}
else if (element.attachEvent){
element.attachEvent('on'+eventName,listener);
}
else
element['on'+eventName]=listener;
},
} //时间的方法与属性
var time={
//用来标记是开还是关,0表示关
enabled:0, //存储星期
day:["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //设定和显示时间
//注意中间用了toLocaleString();
Time_Set:function ()
{
var today = new Date();
TM=window.setTimeout('time.Time_Set()', 1000);
var timeStr=today.toLocaleString()+" "+time.day[today.getDay()];
document.clock.disp.value = timeStr;
console.log(today.toLocaleString());
}, } //全局定时函数名字
var TM; //点击开事件
var onbtn=common.getid("onbtn");
common.on(onbtn,'click',function(){
if(time.enabled == 0)
{
time.Time_Set();
time.enabled = 1;
}
}); //点击关事件
var offbtn=common.getid("offbtn");
common.on(offbtn,'click',function(){
if( time.enabled==1 )
{
document.clock.disp.value='';
clearTimeout( TM );
time.enabled = 0;
}
}); </script>
</html>
4、年龄提示器
网页打开时依次弹出3个输入对话框,分别需要你输入你的出生日期(年月日),然后显示内容,显示你的出生年月,距离下一次你的生日还有多少时间,以及你活了多少时间。效果图:
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>年龄提示器</title>
<style>
div{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 375px;
height: 200px;
border: 2px solid red;
padding: 20px;
}
p{
margin: 0;
margin-bottom: 10px;
}
input{
margin-bottom: 10px;
}
</style>
</head> <body bgcolor="f9fcb6" >
<div>
<form>
<p id="birday"></p>
<p id="age"></p>
<input type="text" name="nextYear" size="47" value="">
<p>I've been alive for...</p>
<input type="text" name="liveYear" size="47" value="">
<p>您已在本站停留了</p>
<input type=text name="input1" size=10 value="">
<br>
</form>
</div>
</body>
<script > function getid(id){
return document.getElementById(id);
} var timerID=window.setTimeout("showtime()",1); //弹出输入框,获取用户的出生日期,注意要把日期转化为数字
var bMonth =parseInt(prompt('Which month were you born in?(月份)','1-12'));
var bDate =parseInt(prompt('Which day were you born on?(天)','1-31'));
var bYear =parseInt(prompt('Which year were you born in?(年份)','1900-'+new Date().getFullYear())); var tMonth = ['January','February','March','April','May','June','July','August','September','October','November','December']; var corrMonth = tMonth[bMonth-1]; getid("birday").innerHTML=" I was born <b>"+corrMonth+", "+bDate+", "+bYear+"</b>. (<b>"+bMonth+"/"+bDate+"/"+bYear+"</b>)"; //传入格式化后的时间,用来计算两个时间差,nextAgeDay > today
function computeTime(nextAgeDay,today){
var day={};
var liveSec=nextAgeDay.getTime();
var lTime = today.getTime(); var daysec=24*60*60*1000;
var hoursec=60*60*1000;
var minsec=60*1000;
var tt=(-lTime+liveSec); //计算时间差,天,小时,分,秒
day._1day=Math.floor(tt/daysec);
day._1hour=Math.floor((tt-day._1day*daysec)/hoursec);
day._1min=Math.floor((tt-day._1day*daysec-day._1hour*hoursec)/minsec);
day._1sec=Math.floor((tt-day._1day*daysec-day._1hour*hoursec-day._1min*minsec)/1000); return day;
} //计算距离下一岁还有多少天的时候,可以采用与现在的秒数相减getTime;
function showtime()
{
//获取当前日期
var today = new Date();
var month = today.getMonth() + 1;
var date = today.getDate();
var year = today.getFullYear(); //计算下一次生日是哪一年
var nextAgeYear;
var yourAge = year - bYear;
if (bMonth < month || ((bMonth == month) && (date > bdate))) {
yourAge--;
nextAgeYear=year+1;
}
else {
nextAgeYear=year;
} //下一年几岁
var nextAge = yourAge + 1; //将下一次生日时间格式化,默认时间在00:00;计算距离下一次生日还还有多长时间
var nextAgeDay = new Date(""+nextAgeYear+","+bMonth+", "+bDate+" , 00:00");
var day=computeTime(nextAgeDay,today); //将出生日期时间格式化,默认时间在00:00;计算已经活了多久了
var bornAgeDay = new Date(""+bYear+","+bMonth+", "+bDate+" , 00:00");
var lday=computeTime(today,bornAgeDay); //将结果输出
document.forms[0].nextYear.value =""+day._1day+"days, "+day._1hour+"hours, "+day._1min+"minutes, "+day._1sec+"seconds";
getid("age").innerHTML=" I am <b>"+yourAge+"</b> years old, and will turn <b>"+nextAge+"</b> in:";
document.forms[0].liveYear.value =""+lday._1day+"days, "+lday._1hour+"hours, "+lday._1min+"minutes, "+lday._1sec+"seconds"; timerID = window.setTimeout("showtime()",1000);
} //第三个输入框,计算停留时间
var sec=0;
var min=0;
var hou=0;
var idt=window.setTimeout("update();",1); function update()
{
if(sec==60){sec=0;min+=1;}
if(min==60){min=0;hou+=1;}
document.forms[0].input1.value=hou+"时"+min+"分"+sec+"秒";
idt=window.setTimeout("update();",1000);
sec++;
} </script>
</html>
5、得到文件的最后修改时间
本节主要讲获取HTML文件的最后修改时间。效果如下,其实跟前面的例子很像。
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获得文件的最后修改时间</title>
<style>
body{
background: yellow;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 300px;
height: 110px;
border: 2px solid red;
padding: 10px;
}
p{
text-align: center;
margin: 0px;
padding: 10px;
}
</style>
</head>
<body> <script> //获得文件的格式化最后修改时间
function DocDate()
{
var StrofLastMod = document.lastModified;
//获得文件的最后修改时间,它是一个string类型的变量。 var months = ["January","February","March","April","May","June","July","August", "September","October","November","December"]; //月份名变量,供转换。
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];//星期名变量,供转换 var c = ":"; //用来分隔时,分,秒。 var mdate =new Date(StrofLastMod);
var month = months[mdate.getMonth()];
var date = mdate.getDate();
var year = mdate.getFullYear();
var day = days[mdate.getDay()];
var minutes=mdate.getMinutes();
var hours= mdate.getHours();
var seconds=mdate.getSeconds();
var miliSec=mdate.getMilliseconds(); var dateStr = year+" "+month+" "+date+" "+day+" "+hours+c+minutes+c+seconds+"."+miliSec; //获得格式化的文件最后修改时间。 return dateStr;
} var div=document.createElement("div");
div.className="center";
var divson=document.createElement("div");
divson.innerHTML="<p>This File is last updated at:</p><p>"+DocDate()+"</p><p>"+document.lastModified+"</p>";
div.appendChild(divson);
document.body.appendChild(div);
</script>
</body>
</html>
javascript实例——时间日期篇(包含5个实例)的更多相关文章
- javascript实例——鼠标特效篇(包含2个实例)
鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小. ...
- JavaScript 对时间日期格式化
JavaScript 对时间日期格式化 // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位 ...
- javascript实例——文本特效篇(包含3个小例子)
1.标题跑马灯 常常能够在一些新闻网站,或者其他地方,看到文字在一个特定的区域内,来回滚动.一旦超出边界就消失了,那么这些效果是如何做到的呢,今天我们就来讲讲. 图示效果: 源代码: <!doc ...
- JavaScript 中的日期和时间
前言 本篇的介绍涵盖以下部分: 1. 时间标准指的是什么?UCT和GMT 的概念.关联和区别? 2. 时间表示标准有哪些? 3. JS 中时间的处理 日期时间标准 日期的标准就不多说了 -- 公元纪年 ...
- asp.net(C#)实现功能强大的时间日期处理类完整实例
作者:smartsmile2012 字体:[增加 减小] 类型:转载 时间:2016-06-30我要评论 这篇文章主要介绍了asp.net(C#)实现功能强大的时间日期处理类,封装了针对日期与时间的各 ...
- Java8获取当前时间、新的时间日期类如Java8的LocalDate与Date相互转换、ZonedDateTime等常用操作包含多个使用示例、Java8时区ZoneId的使用方法、Java8时间字符串解析成类
下面将依次介绍 Date转Java8时间类操作 ,Java8时间类LocalDate常用操作(如获得当前日期,两个日期相差多少天,下个星期的日期,下个月第一天等) 解析不同时间字符串成对应的Java ...
- javascript 时间日期处理相加,减操作方法js
javascript 时间日期处理相加,减操作方法js function dateAddDays(dataStr,dayCount){ var strdate = dataStr; // 2017年0 ...
- JavaScript中的日期时间函数
1.Date对象具有多种构造函数,下面简单列举如下 new Date() new Date(milliseconds) new Date(datestring) new Date(year, mont ...
- javascript时间日期操作
Js获取当前日期时间及其它操作 var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); ...
随机推荐
- wcf session开启
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] pu ...
- Android 操作SQLite基本用法
一.SQLite的介绍 1.SQLite简介 SQLite是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入 式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的 ...
- ASP.NET 创建网站地图
很多个人站长会使用工具来生成自己网站的站点地图,这样做的缺点在于网站的 sitemap 不能及时的得到更新.当我们发表了一篇新文章时,应该对网站的地图进行更新,并通知搜索引擎网站地图已经发生了改变! ...
- const in C++
const关键字是C++中常用的类型修饰符,用法非常灵活,使用const将大大改善程序的健壮性. const的作用 1. 定义const常量: 比如: const int Max = 100; 2. ...
- mysql的一个特殊问题 you can't specify target table 'cpn_regist' for update in FROM clause
今天在操作数据库的时候遇到了一个问题,sql语句如下: UPDATE cpn_yogurt_registration SET dep1Name = '1' WHERE `key` in (SELEC ...
- mysql死锁问题解决步骤
锁表产生的原因 锁表的具体情况 解决锁表问题 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程 show processlist; 查询到相对 ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
- GDI+技术
GDI+是GDI的后继者,它是一种构成 Windows XP 操作系统的子系统的应用程序编程接口. 一般来说有3种基本类型的绘图界面,分别为Windows 窗体上的控件.要发送给打印机的页面和内存中的 ...
- Android 3D滑动菜单完全解析,实现推拉门式的立体特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10471245 在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一 ...
- Entity Framework Code First 学习
1.添加entityframework 项目-管理解决方案的 NuGet 程序包-联机-Entity Framework 2.code first Migration 工具->库程序包管理器-& ...