每天JS(2)实践
最近在博客圆发现别人的博客有很多特别的小应用，所以我研究一下，也为自己的博客添加一写小应用，现在把代码贴出来。
正好很多都和js的Date对象有关系。。
日历：
正好很多都和js的Date对象有关系。。
日历：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公元 年月日 星期</title>
</head>
<body >
<div id="NowCalender" style=" font-size:17px; font-weight:bold; position:relative; left:0px; width:154px; background-color:#FFFFFF; border:2px #3796b4 inset;">
<font color="#30B0D6">公元 <span id="layerYear"></span>年<span id="layerMonth"></span>月<span id="layerDay"></span>日 星期<span id="layerWeek"></span><span id="layerCalendar"></span>
<span id="layerNow"></span>
<script type="text/javascript">
<!--
var dayArray=new Array("日","一","二","三","四","五","六");
var monthArray=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var stringTable="<table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" align=\"left\" bordercolor=\"#3796b4\"><tr bgcolor=\"#b2e3f3\" align=\"center\">";
for (var i=0; i<dayArray.length; ++i)
{
stringTable+="<td class=\"tdclass\"><font color=\"white\"><b>"+dayArray[i]+"</b></font></td>";
}
stringTable+="</tr>";
function setValue(tag, str)
{
document.getElementById(tag).innerHTML=str;
}
function showTime()
{
var today=new Date();
var currentYear=today.getFullYear()
if (((currentYear%4==0)&&(currentYear%100!=0))||(currentYear%400==0))
monthArray[1]=29;
var allDays=monthArray[today.getMonth()];
var currentWeek=today.getDay();
var currentDay=today.getDate();
var i=currentDay%7-currentWeek;
var threshold=(7+i)%7;
var isEnd=false;
var stringAll=stringTable;
while (true)
{
if (isEnd)
{
stringAll+="<td class=\"tdclass\" bgcolor=\"#EEEEEE\"> </td>";
if (i % 7==(threshold+6)%7)
{
stringAll+="</tr>";
break;
}
}
else
{
if (i % 7==threshold)
stringAll+="<tr align=\"center\">";
stringAll+=i>0?"<td class=\"tdclass\""+(i==currentDay?" bgcolor=\"#FEA477\" style=\"color: #FFFFFF\"":"")+"><b>"+i+"</b></td>":"<td class=\"tdclass\" bgcolor=\"#EEEEEE\"> </td>";
if (i % 7==(threshold+6)%7)
{
stringAll+="</tr>";
if (i==allDays)
break;
}
if (i==allDays)
isEnd=true;
}
++i;
}
stringAll+="</table>";
setValue("layerYear", currentYear);
setValue("layerMonth", today.getMonth()+1);
setValue("layerDay", currentDay);
setValue("layerWeek", dayArray[currentWeek]);
setValue("layerCalendar", stringAll);
if(document.all)
{
setValue("layerNow","<br/><br/><br/><br/><br/><br/><br/><br/>现在时间:"+ today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());
}
else if(navigator.appName == "Netscape")
{
setValue("layerNow","<br/>现在时间:"+ today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());
}
setTimeout("showTime()",1000);
}
showTime()
// -->
</script>
</font>
</div>
</body>
</html>
打字效果：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公元 年月日 星期</title>
</head>
<body >
<div id="NowCalender" style=" font-size:17px; font-weight:bold; position:relative; left:0px; width:154px; background-color:#FFFFFF; border:2px #3796b4 inset;">
<font color="#30B0D6">公元 <span id="layerYear"></span>年<span id="layerMonth"></span>月<span id="layerDay"></span>日 星期<span id="layerWeek"></span><span id="layerCalendar"></span>
<span id="layerNow"></span>
<script type="text/javascript">
<!--
var dayArray=new Array("日","一","二","三","四","五","六");
var monthArray=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var stringTable="<table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" align=\"left\" bordercolor=\"#3796b4\"><tr bgcolor=\"#b2e3f3\" align=\"center\">";
for (var i=0; i<dayArray.length; ++i)
{
stringTable+="<td class=\"tdclass\"><font color=\"white\"><b>"+dayArray[i]+"</b></font></td>";
}
stringTable+="</tr>";
function setValue(tag, str)
{
document.getElementById(tag).innerHTML=str;
}
function showTime()
{
var today=new Date();
var currentYear=today.getFullYear()
if (((currentYear%4==0)&&(currentYear%100!=0))||(currentYear%400==0))
monthArray[1]=29;
var allDays=monthArray[today.getMonth()];
var currentWeek=today.getDay();
var currentDay=today.getDate();
var i=currentDay%7-currentWeek;
var threshold=(7+i)%7;
var isEnd=false;
var stringAll=stringTable;
while (true)
{
if (isEnd)
{
stringAll+="<td class=\"tdclass\" bgcolor=\"#EEEEEE\"> </td>";
if (i % 7==(threshold+6)%7)
{
stringAll+="</tr>";
break;
}
}
else
{
if (i % 7==threshold)
stringAll+="<tr align=\"center\">";
stringAll+=i>0?"<td class=\"tdclass\""+(i==currentDay?" bgcolor=\"#FEA477\" style=\"color: #FFFFFF\"":"")+"><b>"+i+"</b></td>":"<td class=\"tdclass\" bgcolor=\"#EEEEEE\"> </td>";
if (i % 7==(threshold+6)%7)
{
stringAll+="</tr>";
if (i==allDays)
break;
}
if (i==allDays)
isEnd=true;
}
++i;
}
stringAll+="</table>";
setValue("layerYear", currentYear);
setValue("layerMonth", today.getMonth()+1);
setValue("layerDay", currentDay);
setValue("layerWeek", dayArray[currentWeek]);
setValue("layerCalendar", stringAll);
if(document.all)
{
setValue("layerNow","<br/><br/><br/><br/><br/><br/><br/><br/>现在时间:"+ today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());
}
else if(navigator.appName == "Netscape")
{
setValue("layerNow","<br/>现在时间:"+ today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());
}
setTimeout("showTime()",1000);
}
showTime()
// -->
</script>
</font>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<script type="text/javascript">
<!--
var layers = document.layers, style = document.all, both = layers || style, idme=908601;//定义变量
if (layers) { layerRef = 'document.layers'; styleRef = ''; } //document.layers是netscape自定义的方法
if (style) { layerRef = 'document.all'; styleRef = '.style'; }//document.all是IE自定义的方法
function writeOnText(obj, str) {
if (layers) with (document[obj])
{ document.open();
document.write(str);
document.close(); }
if (style)
eval(obj+'.innerHTML= str');
}
//以下是输出的内容，自己修改即可。
var dispStr = new Array(
"<font color=#FFFFFF size=3>成功是获得赞美与尊重的最有效的途径</font></br>");
var overMe=0;
//function txtTyper(输入字符, 字符的索引, 对象名, 移动对象名, clr1, clr2, delay, plysnd)
function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {
var tmp0 = tmp1 = '', skip = 0;
if (both && idx <= str.length) {
if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; }
if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; }
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
if (overMe==0 && plysnd==1) {
if (navigator.plugins[0]) {
if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100); }
} else if (document.all) {
ding.Stop();
setTimeout("ding.Run()",100);
}
overMe=1;
} else overMe=0;
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);
}
}
function init() {
txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#0092ba', '#0092ba', 90, 0);
}
// -->
</script>
</head>
<body>
<div class="ttl1" style="width:200px; border:2px #3796b4 outset; position:absolute; " id="ttl0" onmouseover="init()" ><span class="ttl1"></span></div>
</body>
</html>
离某天还有多少天：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<script type="text/javascript">
<!--
var layers = document.layers, style = document.all, both = layers || style, idme=908601;//定义变量
if (layers) { layerRef = 'document.layers'; styleRef = ''; } //document.layers是netscape自定义的方法
if (style) { layerRef = 'document.all'; styleRef = '.style'; }//document.all是IE自定义的方法
function writeOnText(obj, str) {
if (layers) with (document[obj])
{ document.open();
document.write(str);
document.close(); }
if (style)
eval(obj+'.innerHTML= str');
}
//以下是输出的内容，自己修改即可。
var dispStr = new Array(
"<font color=#FFFFFF size=3>成功是获得赞美与尊重的最有效的途径</font></br>");
var overMe=0;
//function txtTyper(输入字符, 字符的索引, 对象名, 移动对象名, clr1, clr2, delay, plysnd)
function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {
var tmp0 = tmp1 = '', skip = 0;
if (both && idx <= str.length) {
if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; }
if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; }
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
if (overMe==0 && plysnd==1) {
if (navigator.plugins[0]) {
if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100); }
} else if (document.all) {
ding.Stop();
setTimeout("ding.Run()",100);
}
overMe=1;
} else overMe=0;
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);
}
}
function init() {
txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#0092ba', '#0092ba', 90, 0);
}
// -->
</script>
</head>
<body>
<div class="ttl1" style="width:200px; border:2px #3796b4 outset; position:absolute; " id="ttl0" onmouseover="init()" ><span class="ttl1"></span></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>距离某天时间</title>
</head>
<body>
<script type="text/javascript"><!--
BirthDay=new Date("july 01,2008");//改成你的计时日期
today=new Date();
var noticeTime;
if(today.getTime()>BirthDay.getTime())
{
timeold=(today.getTime()-BirthDay.getTime())
noticeTime='已经过: ';
}
else if(today.getTime()<=BirthDay.getTime())
{
timeold=(BirthDay.getTime()-today.getTime())
noticeTime='距离那天还有: ';
}
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
//-->
</script>
<div id="showTime" style=" font-family:'Times New Roman', Times, serif;
font-weight:bold; border:2px #58B7FC inset; width:151px;">
<img src="http://www.cnblogs.com/images/cnblogs_com/worksguo/96573/r_%e6%af%95%e4%b8%9a%e5%95%a6.gif" alt=""/>
<script type="text/javascript"><!--
document.write("<p style='background-color:#34A2DC;'>"+noticeTime+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒了!"+"</p>");
//document.write("msPerDay"+msPerDay+"timeold"+timeold+"sectimeold"+sectimeold);
//-->
</script>
</div>
</body>
</html>
都是这两天自己写的啊 ！<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>距离某天时间</title>
</head>
<body>
<script type="text/javascript"><!--
BirthDay=new Date("july 01,2008");//改成你的计时日期
today=new Date();
var noticeTime;
if(today.getTime()>BirthDay.getTime())
{
timeold=(today.getTime()-BirthDay.getTime())
noticeTime='已经过: ';
}
else if(today.getTime()<=BirthDay.getTime())
{
timeold=(BirthDay.getTime()-today.getTime())
noticeTime='距离那天还有: ';
}
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
//-->
</script>
<div id="showTime" style=" font-family:'Times New Roman', Times, serif;
font-weight:bold; border:2px #58B7FC inset; width:151px;">
<img src="http://www.cnblogs.com/images/cnblogs_com/worksguo/96573/r_%e6%af%95%e4%b8%9a%e5%95%a6.gif" alt=""/>
<script type="text/javascript"><!--
document.write("<p style='background-color:#34A2DC;'>"+noticeTime+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒了!"+"</p>");
//document.write("msPerDay"+msPerDay+"timeold"+timeold+"sectimeold"+sectimeold);
//-->
</script>
</div>
</body>
</html>
浙公网安备 33010602011771号