生活随笔
收集整理的這篇文章主要介紹了
2020-3-16
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
題目一：
如何用js獲取checked屬性值。
通過checked屬性可以設置復選框或者單選按鈕處于選中狀態。
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
=" utf-8">
<script
>
window
.onload =()=>{let ck
=document
.getElementById("ck");console
.log(ck
.checked
);
}
</script
>
</head
>
<body
> <input type
="checkbox" checked id
="ck"/>
</body
>
</html
>
提示：
在HTML中設置checked屬性時，無論是否賦值，附何種值，其復選框都是選中狀態，而使用JavaScript進行動態操作的時候，設置checked屬性值可為true或者false可以復選框設置為選中和非選中狀態（boolean）。
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<script type
="text/javascript">
window
.onload=()=>{let ck
=document
.getElementById("ck3");ck
.checked
=false;
}
</script
>
</head
>
<body
>
<input type
="checkbox" id
="ck">
<input type
="checkbox" id
="ck1">
<input type
="checkbox" checked id
="ck2">
<input type
="checkbox" checked
=true id
="ck3">
</body
>
</html
>
結果為：
題目二：
JavaScript 設置div顯示與隱藏
有時需要根據代碼的運行狀態動態設置div元素的顯示或者隱藏。
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<style
>
#notclick
{ border
:solid
1px #
EEE; background
:#
F7F7F7; margin
:20px
; padding
:10px
; display
:none
;width
:300px
;
}
</style
>
<script type
="text/javascript">
function show(id
){var odiv
= document
.getElementById(id
);if(odiv
.style
.display
!= 'block'){odiv
.style
.display
= 'block';obt
.value
='關閉';}else{odiv
.style
.display
= 'none'; obt
.value
='展開';}
}
window
.onload=function(){var obt
=document
.getElementById('bt');obt
.onclick=function(){show("notclick")}
}
</script
>
</head
>
<body
>
<input type
="button" value
="展開" id
="obt"/>
<div id
="notclick">歡迎訪問
</div
>
</body
>
</html
>
題目三：
JavaScript 倒計時關閉頁面
很多網站在關閉網頁之前會給出一個倒計時效果，這樣可以讓瀏覽者做到根據相應的情況進行操作。
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
=" utf-8">
<style type
="text/css">
#timer
{width
:200px
;height
:30px
;background
-color
:green
;text
-align
:center
;line
-height
:30px
;margin
:0px auto
;
}
</style
>
<script type
="text/javascript">
var otimer
;
var second
=10;
function timer(){otimer
.innerHTML
=second
;if(second
>0){second
=second
-1;return false;}window
.close();
}
window
.onload=function(){otimer
=document
.getElementById("timer");setInterval(timer
,1000);
}
</script
>
</head
>
<body
><div id
="timer"></div
>
</body
>
</html
>
分析：
利用定時器setInterval()方法，不斷調用timer()函數，每調用一次秒數減一，直到秒數變為零就執行window.close()，將頁面關閉。同時每次調用函數都會將當前的剩余秒數寫入div中，于是實現了倒計時效果。
總結
以上是生活随笔為你收集整理的2020-3-16的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
