นี่คือเอฟเฟกต์พิเศษของ JavaScript Courtship ผลกระทบมีดังนี้:
ไม่เพียง แต่เอฟเฟกต์ของภาพด้านล่างจะปรากฏขึ้น แต่รูปสามารถหมุนได้ด้วยเมาส์ นี่เป็นเพียงตัวอย่างที่เรียบง่ายและไม่ได้แก้ไข จากตัวอย่างนี้มันสามารถทำให้การเกี้ยวพาราสีสนุกขึ้น ผู้ชายลังเลคุณสามารถโพสต์หน้าเว็บดังกล่าวไปยัง loli ตัวน้อยของคุณได้หรือไม่? ยอดเยี่ยม.
โพสต์รหัส:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> แทรกชื่อเรื่องที่นี่ </title>
<style type = "text/css">
ร่างกาย{
เส้นขอบ: 1px สีแดงของแข็ง;
ความกว้าง: 1000px;
ความสูง: 1000px;
มาร์จิ้น: 0px auto;
Padding: 0px;
สี: สีเขียว;
-
-
ลากวัตถุจากสตรีมเอกสารโดยใช้คุณสมบัติเช่นซ้าย, ขวา, ด้านบน, ล่าง, ฯลฯ เมื่อเทียบกับ
มันใกล้เคียงกับวัตถุหลักที่อยู่ในตำแหน่งมากที่สุดสำหรับการวางตำแหน่งสัมบูรณ์ หากไม่มีวัตถุหลักดังกล่าวอยู่
โดยวัตถุร่างกาย และน้ำตกของมันถูกกำหนดโดยแอตทริบิวต์ z-index
-
Div {
ตำแหน่ง: สัมบูรณ์;
-
</style>
<script type = "text/javascript">
// ทำไมฉันต้องใช้ OnLoad? เพราะเมื่อฉันเริ่มต้น div ของนาฬิกาในรหัส JavaScript หน้าการดีบักพบว่าไม่มีการใช้งาน
// ต่อมาฉันพบเหตุผลรหัส HTML ถูกแยกวิเคราะห์จากด้านหน้าไปด้านหลัง เมื่อแยกวิเคราะห์รหัส JavaScript ก่อนไปที่ร่างกาย
// เมื่อเพิ่มโหนดเด็กจะไม่พบร่างกายที่ไม่ได้รับการแก้ไข ดังนั้นคุณควรแยกวิเคราะห์ร่างกายก่อน มีสองวิธีอย่างใดอย่างหนึ่งคือ
วิธีการเขียนของ // อีกวิธีหนึ่งคือการเพิ่มวิธี ONLOAD ลงในแท็กตัวถัง
window.onload = function () {
init ();
-
// กำหนดอาร์เรย์ div เพื่อเก็บ 12 divs
// เนื่องจากความสัมพันธ์ระหว่างตำแหน่ง 12 div ก่อนกำหนดจุดและรัศมีเพื่อคำนวณตำแหน่งของ div
var divs = [];
วาจา lovebaby = ["i", "love", "you", "you", "bao", "bei", "love", "love", "me", "wan", "wan", "wan", "wan" "wan" "wan" "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" "wan" "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" "" wan "" "" " "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "" "wan" "
var cx = 300;
var cy = 300; // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var r = 150;
ควรควบคุม var divcenternode; // ตำแหน่งของจุดกึ่งกลางและควรตั้งค่าตัวแปรทั่วโลก
// กำหนดฟังก์ชั่นเริ่มต้น
ฟังก์ชัน init () {
// สร้าง div ที่ตำแหน่งจุดกึ่งกลาง (คุณสามารถเขียนวัตถุ courtship)
divCenterNode = document.createElement ("div");
DivCenterNode.innerhtml = "Tingting แต่งงานกับฉัน!";
document.body.appendchild (DivcenterNode);
divcenterNode.style.left = (cx-50)+"px";
DivCenterNode.style.top = (Cy-30)+"px";
// สร้าง 12 divs เพื่อสร้างนาฬิกาต้องห้ามและวางไว้ในร่างกาย
สำหรับ (var x = 1; x <= 12; x ++) {
// สร้าง div
var divnode = document.createElement ("div");
divnode.innerhtml = lovebaby [x-1];
// วัตถุร่างกายไม่จำเป็นต้องได้รับเช่นวัตถุอื่น ๆ และไลบรารี JS ได้รับการห่อหุ้ม
document.body.appendchild (divnode);
divs.push (divnode);
-
// ทุกครั้งที่ StartClock () เริ่มเปลี่ยนตำแหน่งองค์ประกอบ div
-
ในความเป็นจริงเพื่อให้ได้ผลการหมุนมีความจำเป็นที่จะต้องชดเชยอย่างต่อเนื่องหรือ
การเปลี่ยนตำแหน่ง แต่การวนซ้ำคุณไม่สามารถควบคุมระยะเวลาในการเริ่มต้นฟังก์ชั่นได้
ในเวลานี้วัตถุหน้าต่างมีวิธีการ
-
startClock ();
-
// ชดเชยของ Div
Var Offset = 0; // การชดเชยปริญญา
// กำหนดฟังก์ชั่นในการจัดตำแหน่งและหมุนตำแหน่งแยกกัน
ฟังก์ชั่น startClock () {
สำหรับ (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// ระดับของแต่ละหมายเลข
var dushu = 30*x+ออฟเซ็ต;
// ค่ามุม* math.pi /180 = ค่าเรย์
var divleft = cx+r*math.sin (dushu*math.pi/180);
div.style.left = divleft+"px";
var divtop = cy-r*math.cos (dushu*math.pi/180);
div.style.top = divtop+"px";
-
ชดเชย+= 50;
// ช่วงเวลาที่แน่นอนโทรกลับฟังก์ชั่นนี้
// นิพจน์ถูกคำนวณหลังจากค่ามิลลิวินาทีที่ระบุ พารามิเตอร์แรกคือนิพจน์พารามิเตอร์ที่สองคือเวลา
Settimeout (StartClock, 80); // วิธีการของวัตถุหน้าต่าง
-
// กำหนดนาฬิกานี้ไปยังตำแหน่งที่แตกต่างกันเมื่อเมาส์เคลื่อนที่
ฟังก์ชั่น Clockmove (เหตุการณ์) {
cx = event.clientx; // พิกัด X ของตำแหน่งเมาส์
cy = event.celienty; // พิกัด y ของตำแหน่งเมาส์
divcenterNode.style.left = (cx-50)+"px";
DivCenterNode.style.top = (Cy-30)+"px";
-
</script>
</head>
<body onmousemove = "clockmove (event)">
-
1. แสดงตัวเลข 12 ตัวเป็นวงกลม
1/สร้าง 12 divs กำหนดค่า 1--12 ตามลำดับ
2/ค้นหา 12 divs และสร้างวงกลม
-
</body>
</html>
ตอนแรกฉันต้องการสร้างนาฬิกาที่สามารถหมุนและเรียกใช้ได้ ดังนั้นการตั้งชื่อในรหัสจึงเกี่ยวข้องกับนาฬิกาดังนั้นฉันจะไม่สับสนที่รัก ผู้เริ่มต้นใน JavaScript ฉันรู้สึกว่า JavaScript มีประสิทธิภาพมาก