บทความนี้อธิบายวิธี JavaScript เพื่อเปลี่ยนพื้นหลังและสีตัวอักษรของหน้าเว็บ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
JavaScript โดยคลิกที่ปุ่มเพื่อเปลี่ยนสีของพื้นหลังหน้าเว็บและแบบอักษร มีปุ่ม n ให้เปลี่ยนสีในหน้าเว็บ การคลิกปุ่มที่แตกต่างกันตัวอักษรและพื้นหลังของหน้าเว็บจะเปลี่ยนเป็นสีที่แตกต่างกัน แอปเพล็ตจาวาสคริปต์ที่ง่ายมาก
1. วัตถุประสงค์พื้นฐาน
ทันทีที่คุณเปิดหน้าเว็บคุณจะแจ้งข้อความอวยพร "สวัสดี" ก่อน
มีปุ่ม n ที่จะเปลี่ยนสีในหน้าเว็บโดยที่การส่งคืนเป็นสีเริ่มต้นของหน้าเว็บพื้นหลังเป็นสีขาวและตัวอักษรเป็นสีดำ
คลิกปุ่มที่แตกต่างกันและแบบอักษรและพื้นหลังของหน้าเว็บจะเปลี่ยนเป็นสีที่แตกต่างกัน
ตอนแรกฉันต้องการปรับปรุงสายรุ้ง แต่หลักการเหมือนกันทุกประการดังนั้นฉันจะไม่เขียนปุ่มเพิ่มเติม
2. แนวคิดพื้นฐาน
กุญแจสำคัญคือการจัดเตรียม ID สำหรับแท็กตัวถังและแบบอักษร JS เพื่อให้สามารถควบคุมได้ใน JS ตัวอย่างนี้ให้แอปพลิเคชันกับฟังก์ชั่น JS
3. กระบวนการผลิต
เพียงแค่หน้าเล็ก ๆ ง่ายๆโปรดดูความคิดเห็นสำหรับรายละเอียด:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> js เปลี่ยนสีพื้นหลัง </title>
<!-ย่อหน้านี้สามารถแยกออกเป็นไฟล์ JS ได้ แต่รหัสนี้สั้นเกินไปดังนั้นจึงไม่จำเป็น->
<script type = "text/javascript">
// onLoad เทียบเท่ากับตัวสร้างของหน้าเว็บนี้และ onunload นั้นเทียบเท่ากับฟังก์ชั่นการแยกของหน้าเว็บนี้
ฟังก์ชันโหลด () {
แจ้งเตือน ("สวัสดี!");
-
ฟังก์ชัน unload () {
การแจ้งเตือน ("ลาก่อน!");
-
ฟังก์ชั่น changecolor (bcolor, fcolor) {
// เทียบเท่ากับการเปลี่ยนสีของตัวอักษรสำหรับตัวอักษร <span style = "สี: ผ่าน fcolor">
document.getElementById ("body"). style.background = bcolor;
document.getElementById ("ziti"). style.color = fcolor;
-
</script>
</head>
<!-กุญแจสำคัญคือการจัดเตรียม ID สำหรับทั้งหน้าเว็บและแบบอักษรบรรทัด วิธี GetElementById () ใน JS สามารถควบคุมสิ่งต่าง ๆ ได้อย่างง่ายดายใน CSS->
<body onload = "load ()" onunload = "unload ()" id = "body">
<span id = "ziti"> js </span>
<br />
<!-โปรดทราบว่าเมื่อผ่านพารามิเตอร์ในคำพูดสองครั้งคำพูดสองเท่าดั้งเดิมจะกลายเป็นคำพูดเดียว ค่าของ onclick เป็นสิ่งที่จะถูกเรียกใช้เมื่อปุ่มนี้ถูกคลิก->
<อินพุต onclick = "changecolor ('#ff0000', '#ffffff')" type = "ปุ่ม"
value = "red" />
<อินพุต onclick = "changecolor ('#ff9900', '#ffffff')" type = "ปุ่ม"
value = "Orange" />
<อินพุต onclick = "changecolor ('#ffff00', '#000000')" type = "ปุ่ม"
value = "เหลือง" />
-
<อินพุต onclick = "changecolor ('#ffffff', '#000000')" type = "ปุ่ม"
value = "return" />
</body>
</html>
ฟังก์ชั่น onunload () เกือบจะถูกต้องเมื่อ IE ปิดหน้านี้และกล่องโต้ตอบนี้จะไม่อยู่ด้านหน้าและ Google Chrome ไม่มีผล ดังนั้นฟังก์ชั่นนี้มีความสำคัญเพียงเล็กน้อย
เพื่อนที่สนใจทักษะการใช้งานสี JS สามารถอ้างถึงเครื่องมือออนไลน์:
เครื่องกำเนิดการเข้ารหัสสี RGB
เครื่องมือจับคู่สีเว็บออนไลน์
RGB Color Query Comparison Table_Color Code Table_Colour Name Name Collection
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน