JS/jQuery實現(xiàn)簡單的開關燈效果【案例】
本文實例講述了JS/jQuery實現(xiàn)簡單的開關燈效果。分享給大家供大家參考,具體如下:
實現(xiàn)效果:

html結構只有兩個button標簽
<button id="left">開燈</button> <button id="right">關燈</button>
方法一:用原生js來做
<script>
//1.獲取頁面元素
var left=document.getElementById('left');
var right=document.getElementById('right');
//注意獲取body的方式有兩種
//第一種:直接使用document的點語法
//var body1=document.body;
// console.log ( body1 )
//第二種:通過標簽名來獲取,但要注意去標簽名后要添加下標,因為用標簽名獲取的是數(shù)組
var body=document.getElementsByTagName('body')[0]//因為通過標簽名獲取的是數(shù)組,一定要求取下標才可以
console.log ( body )
//2.注冊事件
left.onclick=function ( ) {
body.style.backgroundColor="white";
}
right.onclick=function ( ) {
body.style.backgroundColor = "black";
}
</script>
方法二:用JQuery來做
<script>
$ ( function () {
//獲取按鈕們
var buttons=$('button');
//2.開燈
$ (buttons[ 0 ]).click(function () {
$('body').css("backgroundColor",'white');
})
// $ ( 'body' ).css('backgroundColor','white')
//3.關燈
buttons[ 1 ].onclick=function ( ) {
$('body').css('backgroundColor','black');
}
} )
</script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
原生JS+HTML5實現(xiàn)跟隨鼠標一起流動的粒子動畫效果
這篇文章主要介紹了原生JS+HTML5實現(xiàn)跟隨鼠標一起流動的粒子動畫效果,涉及javascript事件響應、數(shù)值運算及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
js動態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
本節(jié)主要介紹了js動態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù),需要的朋友可以參考下2014-07-07
JS日期格式化之javascript Date format
這篇文章主要介紹了JS日期格式化之javascript Date format的相關資料,需要的朋友可以參考下2015-10-10
JavaScript 自動分號插入(JavaScript synat:auto semicolon insertion)
今天在看《Extjs中文手冊》的時候,寫了四五行樣例代碼,結果IE和Firefox一直報錯不通過。2009-11-11

