您好,欢迎来到字泊教育。
搜索
您的当前位置:首页JS小功能(button选择颜色)简单实例_javascript技巧

JS小功能(button选择颜色)简单实例_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 '蓝色': this.style.background = '#0000FF';
break;
}
for (var i = 0; i < btn.length; i++) {
div[i].style.display = '';
}
div[this.index].style.display = 'block';
}
}
};
















Copyright © 2019- zipou.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务