ตัวอย่างง่ายๆ ของฟังก์ชัน JS ขนาดเล็ก (สีการเลือกปุ่ม)

效果：

代码：

复制代码代码如下:

<หัว runat="เซิร์ฟเวอร์">

<title></title>

<style type="text/css">

#สีแดง

-

ความกว้าง: 260px;

ความสูง: 200px;

พื้นหลัง: #FF0000;

จอแสดงผล: ไม่มี;

-

#สีเขียว

-

ความกว้าง: 260px;

ความสูง: 200px;

พื้นหลัง: #00FF00;

จอแสดงผล: ไม่มี;

-

#สีเหลือง

-

ความกว้าง: 260px;

ความสูง: 200px;

พื้นหลัง: #FFFF00;

จอแสดงผล: ไม่มี;

-

#สีฟ้า

-

ความกว้าง: 260px;

ความสูง: 200px;

พื้นหลัง: #0000FF;

จอแสดงผล: ไม่มี;

-

</สไตล์>

<script type="text/javascript">

window.onload = ฟังก์ชั่น () {

var btn = document.getElementsByTagName('อินพุต');

var div = document.getElementsByTagName('div');

สำหรับ (var i = 0; i < btn.length; i++) {

btn[i].ดัชนี = ฉัน;

btn[i].onclick = ฟังก์ชั่น () {

สำหรับ (var i = 0; i < btn.length; i++) {

btn[i].style.พื้นหลัง = '';

-

สวิตช์ (this.value) {

กรณี '红色': this.style.พื้นหลัง = '#FF0000';

หยุดพัก;

case '绿色': this.style.พื้นหลัง = '#00FF00';

หยุดพัก;

case '黄色': this.style.พื้นหลัง = '#FFFF00';

หยุดพัก;

กรณี '蓝色': this.style.พื้นหลัง = '#0000FF';

หยุดพัก;

-

สำหรับ (var i = 0; i < btn.length; i++) {

div[i].style.display = '';

-

div[this.index].style.display = 'บล็อก';

-

-

-

</สคริปต์>

</หัว>

<ร่างกาย>

<input type="button" id="btn1" value="红色" style="สีพื้นหลัง: #FF0000" />

<input type="button" id="btn2" value="绿色" />

<input type="button" id="btn3" value="黄色" />

<input type="button" id="btn4" value="蓝色" />

<div id="red" style="display: block;">

</div>

<div id="สีเขียว">

</div>

<div id="สีเหลือง">

</div>

<div id="สีน้ำเงิน">

</div>

</ร่างกาย>