บทความนี้อธิบายถึงวิธีการใช้เอฟเฟกต์พิเศษ JavaScript หลายรายการในหน้าเว็บเดียวกัน แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
โดยทั่วไปหากแท็ก <script type = "text/javascript"> </script> แท็กปรากฏขึ้นสองครั้งสคริปต์ JavaScript ทั้งหมดจะไม่มีผลอีกครั้งและเพียงครั้งเดียวเท่านั้น <script type = "text/javascript"> </script> แท็กจะปรากฏขึ้น อย่างไรก็ตามมีการใช้เอฟเฟกต์พิเศษ JavaScript หลายรายการในหน้าเว็บเดียวกัน
1. วัตถุประสงค์พื้นฐาน
ติดตั้งนาฬิกาจาวาสคริปต์สองตัวในหน้าเว็บซึ่งหนึ่งในนั้นเป็นเวลาปกติที่หายไปทุก ๆ 1 วินาทีและอื่น ๆ เป็นนาฬิกาที่ผิดปกติที่หายไปทุก 3 วินาที มันเป็นเพียงการแยกความแตกต่างและอธิบายวิธีการใช้เอฟเฟกต์พิเศษ JavaScript หลายตัวในหน้าเว็บเดียวกัน เอฟเฟกต์แสดงในรูปด้านล่าง:
2. กระบวนการผลิต
วิธีที่ 1:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
ฟังก์ชั่น clocka () {
var time = วันที่ใหม่ (). tolocalestring ();
document.getElementById ("clocka"). innerhtml = เวลา;
-
ฟังก์ชัน A () {
clocka ();
setInterval ("clocka ()", 1,000);
-
ฟังก์ชั่น clockb () {
var time = วันที่ใหม่ (). tolocalestring ();
document.getElementById ("clockb"). innerhtml = เวลา;
-
ฟังก์ชั่น b () {
Clockb ();
setInterval ("clockb ()", 3000);
-
</script>
</head>
<body onload = "a (), b ()">
<div id = "clocka"> </div>
<div id = "clockb"> </div>
</body>
</html>
ก่อนอื่นเขียนเอฟเฟกต์พิเศษที่จะนำไปใช้ในฟังก์ชั่นฟังก์ชั่น a (), b () จากนั้นใช้ ONLOAD ของร่างกายเพื่อโหลดหน้าเว็บและโหลดฟังก์ชั่นนี้ทันที
สำหรับ clocka () และ clockb () พวกเขาจะถูกเขียนใหม่ตามรหัส JavaScript ดั้งเดิม รหัส JavaScript ที่เดิมอยู่ใน <body> มีดังนี้:
คัดลอกรหัสดังนี้: <script type = "text/javascript">
ฟังก์ชั่นนาฬิกา () {
var time = วันที่ใหม่ (). tolocalestring ();
document.getElementById ("นาฬิกา"). innerhtml = เวลา;
-
setInterval ("นาฬิกา ()", 1,000);
</script>
วิธีที่ 2:
มันหมายถึงการไม่เขียนประเภทใน <Script> แต่ประเภทถูกเขียนโดยตรง อย่างไรก็ตามวิธีนี้มีความล่าช้าอย่างแน่นอน เอฟเฟกต์พิเศษจะถูกโหลดทีละตัว หากมีเอฟเฟกต์พิเศษมากเกินไปเอฟเฟกต์จะไม่ดี
อย่างไรก็ตามความเรียบร้อยและความไม่เหมาะสมของการเข้ารหัสนั้นดีกว่าวิธีการข้างต้น
รหัสมีดังนี้:
คัดลอกรหัสดังนี้: <! 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>
<script>
ฟังก์ชั่น clocka () {
var time = วันที่ใหม่ (). tolocalestring ();
document.getElementById ("clocka"). innerhtml = เวลา;
-
ฟังก์ชั่น clockb () {
var time = วันที่ใหม่ (). tolocalestring ();
document.getElementById ("clockb"). innerhtml = เวลา;
-
</script>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> twojs </title>
</head>
<body>
<script>
setInterval ("clocka ()", 1,000);
</script>
<script>
setInterval ("clockb ()", 3000);
</script>
<div id = "clocka"> </div>
<div id = "clockb"> </div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน