JS小功能(button選擇顏色)簡(jiǎn)單實(shí)例
效果:
代碼:
<head runat="server">
<title></title>
<style type="text/css">
#red
{
width: 260px;
height: 200px;
background: #FF0000;
display: none;
}
#green
{
width: 260px;
height: 200px;
background: #00FF00;
display: none;
}
#yellow
{
width: 260px;
height: 200px;
background: #FFFF00;
display: none;
}
#blue
{
width: 260px;
height: 200px;
background: #0000FF;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementsByTagName('input');
var div = document.getElementsByTagName('div');
for (var i = 0; i < btn.length; i++) {
btn[i].index = i;
btn[i].onclick = function () {
for (var i = 0; i < btn.length; i++) {
btn[i].style.background = '';
}
switch (this.value) {
case '紅色': this.style.background = '#FF0000';
break;
case '綠色': this.style.background = '#00FF00';
break;
case '黃色': this.style.background = '#FFFF00';
break;
case '藍(lán)色': this.style.background = '#0000FF';
break;
}
for (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
}
div[this.index].style.display = 'block';
}
}
};
</script>
</head>
<body>
<input type="button" id="btn1" value="紅色" style="background-color: #FF0000" />
<input type="button" id="btn2" value="綠色" />
<input type="button" id="btn3" value="黃色" />
<input type="button" id="btn4" value="藍(lán)色" />
<div id="red" style="display: block;">
</div>
<div id="green">
</div>
<div id="yellow">
</div>
<div id="blue">
</div>
</body>
- JS實(shí)現(xiàn)的RGB網(wǎng)頁(yè)顏色在線取色器完整實(shí)例
- js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色
- js 顏色選擇器(兼容firefox)
- 5款Javascript顏色選擇器
- javascript使用onclick事件改變選中行的顏色
- js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼
- JavaScript獲取系統(tǒng)自帶的顏色選擇器功能(圖)
- 原生Javascript封裝的一個(gè)AJAX函數(shù)分享
- Javascript中的匿名函數(shù)與封裝介紹
- javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù)用法示例
相關(guān)文章
Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記
這篇文章主要為大家分享了Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記,感興趣的小伙伴們可以參考一下2016-07-07Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法,涉及javascript針對(duì)頁(yè)面元素樣式及屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07每天一篇javascript學(xué)習(xí)小結(jié)(RegExp對(duì)象)
這篇文章主要介紹了javascript中的RegExp對(duì)象知識(shí)點(diǎn),對(duì)RegExp對(duì)象的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-11JavaScript條件判斷_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript使用if () { ... } else { ... }來(lái)進(jìn)行條件判斷。下通過(guò)語(yǔ)句代碼給大家詳細(xì)介紹js 條件判斷的基本知識(shí),需要的的朋友參考下吧2017-06-06JScript中的undefined和"undefined"的區(qū)別
JScript中的undefined和"undefined"的區(qū)別...2007-03-03jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法,結(jié)合實(shí)例形式分析了jQuery結(jié)合bootstrap插件實(shí)現(xiàn)的鼠標(biāo)響應(yīng)式提示框相關(guān)操作技巧,需要的朋友可以參考下2020-04-04