每天JS(2)实践

转载 于 2019-01-08 02:26:04 发布 · 65 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本文分享了几个实用的JavaScript代码片段，包括动态日历显示、模仿打字效果以及计算距离特定日期的时间，这些代码可以轻松地添加到个人博客或网站上，增强用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在博客圆发现别人的博客有很多特别的小应用，所以我研究一下，也为自己的博客添加一写小应用，现在把代码贴出来。
正好很多都和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>
打字效果：
<!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>
离某天还有多少天：

<!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="https://images.cnblogs.com/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>
都是这两天自己写的啊 ！


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值