Javascript(6)
生活随笔
收集整理的這篇文章主要介紹了
Javascript(6)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天看了Javascript視頻教程的一集,主要講述了日期對象Date.
像往常一樣，總結一下這集的小知識點吧。
這次我并不想利用1,2,3。。。歸結小知識點。而是利用示例來說明。感覺這集視頻教程這樣來總結比較直觀。
示例1：顯示時間 主要知識點是： clearTimeout()方法。清除、停止時間的跳轉。 setTimeout()方法。根據設定的時間跳轉。 效果圖： 代碼如下： <!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=gb2312" /> <title>Date對象示例：顯示時間</title> <style type="text/css"> input{font-size:50px;color:#cc0000;border-style::none } </style><script type="text/javascript" > function showNowTime() {var mytime=new Date();var md=(mytime.getYear()+1900)+"-";if(mytime.getMonth()<9){md+="0";}md+=(mytime.getMonth()+1)+"-";if(mytime.getDate()<=9){md+="0";}md+=(mytime.getDate())+" ";if(mytime.getHours()<=9){md+="0"}md+=(mytime.getHours())+":"if(mytime.getMinutes()<=9){md+="0";}md+=(mytime.getMinutes()+":");if(mytime.getSeconds()<=9){md+="0";}md+=mytime.getSeconds();document.getElementById("time").value=md;setTimeout("showNowTime()",1000); }var settime;var i=0;function ShowTime(){i++;alert(i);settime=setTimeout("ShowTime()" ,2000);}function stopShowTime(){clearTimeout(settime);}</script> </head > <body οnlοad="showNowTime()"> <p align="center"> <input id="time" /> <input type="button" οnclick="ShowTime()" value="兩秒彈出一次"/> <input type="button" οnclick="stopShowTime()" value="停止彈出"/> </p> </body> </html> 示例2：提示在某個時間后自動跳轉到某一地址 效果圖： 代碼如下： View Code <!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=gb2312" />
<meta name="keywords" content="youlianjinda"/>
<meta name="description" content="youlianjinda"/>
<meta http-equiv="refresh" content="10,url="http://www.baidu.com""
<title>跳轉</title>
<style type="text/css">
input{
font-size:20px;
color:#33CCFF;
border-style:none;
}
</style>
</head>
<body onload="tiaozhuan()">
<P align="center">
該網站已經停用，如果需要訪問原網站內容，請訪問新的地址<a href="http://www.baidu.com" target="_blank">http://www.baidu.com</a>
點擊后沒有跳轉，將在 <input id="tiaozhuan" value="10" size="3" readonly />秒后自動跳轉。
</P>
<script type="text/javascript">
function tiaozhuan()
{
var settime;
var old=document.getElementById("tiaozhuan").value;
document.getElementById("tiaozhuan").value=parseInt(old)-1;
if(parseInt(old)<=1)
{
window.location="http://www.baidu.com";
clearTimeout(settime);
}
settime=setTimeout("tiaozhuan()",1000);
}
</script>
</body>
</html>
像往常一樣，總結一下這集的小知識點吧。
這次我并不想利用1,2,3。。。歸結小知識點。而是利用示例來說明。感覺這集視頻教程這樣來總結比較直觀。
示例1：顯示時間 主要知識點是： clearTimeout()方法。清除、停止時間的跳轉。 setTimeout()方法。根據設定的時間跳轉。 效果圖： 代碼如下： <!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=gb2312" /> <title>Date對象示例：顯示時間</title> <style type="text/css"> input{font-size:50px;color:#cc0000;border-style::none } </style><script type="text/javascript" > function showNowTime() {var mytime=new Date();var md=(mytime.getYear()+1900)+"-";if(mytime.getMonth()<9){md+="0";}md+=(mytime.getMonth()+1)+"-";if(mytime.getDate()<=9){md+="0";}md+=(mytime.getDate())+" ";if(mytime.getHours()<=9){md+="0"}md+=(mytime.getHours())+":"if(mytime.getMinutes()<=9){md+="0";}md+=(mytime.getMinutes()+":");if(mytime.getSeconds()<=9){md+="0";}md+=mytime.getSeconds();document.getElementById("time").value=md;setTimeout("showNowTime()",1000); }var settime;var i=0;function ShowTime(){i++;alert(i);settime=setTimeout("ShowTime()" ,2000);}function stopShowTime(){clearTimeout(settime);}</script> </head > <body οnlοad="showNowTime()"> <p align="center"> <input id="time" /> <input type="button" οnclick="ShowTime()" value="兩秒彈出一次"/> <input type="button" οnclick="stopShowTime()" value="停止彈出"/> </p> </body> </html> 示例2：提示在某個時間后自動跳轉到某一地址 效果圖： 代碼如下： View Code <!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=gb2312" />
<meta name="keywords" content="youlianjinda"/>
<meta name="description" content="youlianjinda"/>
<meta http-equiv="refresh" content="10,url="http://www.baidu.com""
<title>跳轉</title>
<style type="text/css">
input{
font-size:20px;
color:#33CCFF;
border-style:none;
}
</style>
</head>
<body onload="tiaozhuan()">
<P align="center">
該網站已經停用，如果需要訪問原網站內容，請訪問新的地址<a href="http://www.baidu.com" target="_blank">http://www.baidu.com</a>
點擊后沒有跳轉，將在 <input id="tiaozhuan" value="10" size="3" readonly />秒后自動跳轉。
</P>
<script type="text/javascript">
function tiaozhuan()
{
var settime;
var old=document.getElementById("tiaozhuan").value;
document.getElementById("tiaozhuan").value=parseInt(old)-1;
if(parseInt(old)<=1)
{
window.location="http://www.baidu.com";
clearTimeout(settime);
}
settime=setTimeout("tiaozhuan()",1000);
}
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/lhmlyx2723356/archive/2011/04/30/2033528.html
總結
以上是生活随笔為你收集整理的Javascript(6)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取表中的某个字段名
- 下一篇： 通策医疗是国企吗