一些例題
1.顯示當前的時間
function showDate( ){
var d = new Date(); //獲取當前時間
var year = d.getFullYear(); //獲取當前年份
var month = d.getMonth() + 1; //獲取當前月份，注意加1
var date = d.getDate(); //獲取當前日期
var week = d.getDay(); //獲取星期，因為0代表周日，所以需要if判斷一下
if( week == 0 ){
week = 「周日」;
}
var hour = d.getHours(); //獲取小時
var min = d.getMinutes(); //獲取分鐘
var sec = d.getSeconds(); //獲取秒
return year + 「年」 + month + 「月」 + date + 「日 星期」 + week + 」 」 + hour + 「:」 + min + 「:」 + sec; //將它們組合起來輸出
}
alert( showDate() ); //最後直接調用showDate函數即可
注意引號、分號等標點符號一定要用英文的
運行結果如下：
2.setDate()和getDate()封裝一個函數，可以根據輸入的數值n（天數）顯示n天后的時間
分析：先獲取當前時間，再獲取天數，再用天數加上n天
function numOfDate( n ){ //n天后
var d = new Date(); //獲取當前時刻
var date = d.getDate(); //取出天數
d.setDate( date + n ); //加上n天
return d;
}
alert( numOfDate(2) );
運行結果如下：
計時器
setInterval()
格式：
setInterval( 函數(或匿名函數),毫秒數 ); 或者
setInterval( function(){ } , 毫秒數 ); 只不過一個是寫了函數名，一個是直接定義了函數
功能：每隔所傳參數的毫秒數，就調用一次所傳參數的函數
返回值：當前頁面上對於這個定時器的唯一標識，定時器的ID
有了定時器的ID我們就可以取消定時器，下面會講到
舉個小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript">
var i = 0;
function show(){ //這裡也可以寫成var show = function(){ }
document.write( i++ + 「<br />」 );
}
//然後我們寫一個按鈕，點擊按鈕啟動定時器
window.onload = function(){
var oBtn = document.getElementById( 「btn」 ); //先獲取按鈕
oBtn.onclick = function(){ //把事件驅動函數綁定給這個按鈕
setInterval( show,1000 ); //這裡是函數的傳參，傳show，也可以將show改成function定義的函數內容
}
}
</script>
</head>
<body>
點擊按鈕時啟動一個定時器，這個定時器讓它執行show函數
<input type=」button」 id=」btn」 value=」按鈕」 />
</ body>
</html>
運行結果如下：
取消定時器
clearInterval();
參數：定時器的ID
功能：取消定時器
我們把上面的小例子中的按鈕ID輸出一下
window.onload = function(){
var oBtn = document.getElementById( 「btn」 );
oBtn.onclick = function(){
var timer = setInterval( function(){
document.write( i++ + 「<br />」 );
} ,1000 ); //改寫的上面的函數傳參
alert( timer );
}
}
當我們點擊按鈕時運行的按鈕ID為
那麼怎麼去取消定時器呢？
我們需要加一個if判斷條件，控制它什麼時候取消
window.onload = function(){
var oBtn = document.getElementById( 「btn」 );
oBtn.onclick = function(){
var timer = setInterval( function(){
document.write( i++ + 「<br />」 );
if( i == 3 ){
clearInterval( timer );
}
} ,1000 ); //改寫的上面的函數傳參
alert( timer );
}
}
運行結果如下
以上是定時器的使用及清除
標籤間的所有內容
innerHTML
功能：標籤間的所有內容
舉個小例子：
如果我們的div中有一些信息，想要通過點擊按鈕來獲取這個信息，就需要用到它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript">
window.onload=function( ){
var oBtn=document.getElementById( 「btn」 );
var oDiv=document.getElementById( 「div1」 );
oBtn.onclick=function( ){
//獲取div標籤間的內容
alert(oDiv.innerHTML);
}
}
</script>
</head>
<body>
<div id =」div1」><em>斜體</em></div>
<input type=」button」 id = 「btn」 value=」按鈕」 />
</ body>
</html>
運行結果如下，當我們點擊按鈕時，就彈出對話框
獲取時並不僅僅是文字獲取，而是標籤一起獲取
如果我們想要設置innerHTML的內容，可以這樣寫
window.onload=function( ){
var oBtn=document.getElementById( 「btn」 );
var oDiv=document.getElementById( 「div1」 );
oBtn.onclick=function( ){
//獲取div標籤間的內容
oDiv.innerHTML=」<h1>我是替換文本</h1>」
}
}
運行結果點擊按鈕就可以看添加的
如果在innerHTML包含標籤，標籤會被識別，並且會解析，呈現對應的效果。
- 寫作不易，大家多多關注，謝謝啦-
---web分享，分享的不只是web