Here is a JavaScript courtship special effect, the effect is as follows:
Not only can the effect of the picture below appear, but the figure can also be rotated with the mouse. This is just a simple and unmodified example. Based on this example, it can make courtship more fun. Reluctant men, can you post such a webpage to your little loli? Great.
Post the code:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
border:1px red solid;
width:1000px;
height:1000px;
margin: 0px auto;
padding:0px;
color:green;
}
/*
Drag the object from the document stream, using properties such as left , right , top , bottom , etc. relative to
Its closest to the most positioned parent object for absolute positioning. If such a parent object does not exist,
By body object. And its cascade is defined by the z-index attribute
*/
div{
position:absolute;
}
</style>
<script type="text/javascript">
//Why should I use onload? Because when I initialize the div of the clock in javascript code, the debug page found that there was no implementation
//Later I found out the reason, the html code was parsed from front to back. When parsing JavaScript code first, go to the body
//When adding child nodes, the unresolved body cannot be found. So you should first parse the body. There are two methods, one is
The writing method of //, another way can be to add the onload method to the body tag.
window.onload=function(){
init();
};
//Define a div array to store 12 divs
//Because of the relationship between the 12 div positions, first determine the dot and radius to calculate the position of the div
var divs=[];
var 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
var CX=300;
var CY=300;//--------------------------------------------------------------------------------------------------------------------
var R=150;
var divCenterNode;//The position of the center point should be controlled and global variables should be set
//Define an initialized function
function init(){
//Create a div at the center point position (you can write the courtship object)
divCenterNode=document.createElement("div");
divCenterNode.innerHTML="Tingting, marry me!";
document.body.appendChild(divCenterNode);
divCenterNode.style.left=(CX-50)+"px";
divCenterNode.style.top=(CY-30)+"px";
//Create 12 divs to form a prohibited clock and place it in the body
for(var x=1;x<=12;x++){
//Create a div
var divNode=document.createElement("div");
divNode.innerHTML=loveBaby[x-1];
//The body object does not need to be obtained like other objects, and the js library has been encapsulated.
document.body.appendChild(divNode);
divs.push(divNode);
}
//Every time startClock() is started to reposition the div element
/*
In fact, to achieve the rotation effect, it is necessary to continuously offset, or
Repositioning, but looping, you cannot control how long it takes to start the function, then
At this time, the window object provides a method.
*/
startClock();
}
//Div's offset
var offset=0;//Degree offset
//Define a function to position and rotate the position separately
function startClock(){
for(var x=1;x<=12;x++){
var div = divs[x-1];
//The degree of each number
var dushu=30*x+offset;
// Angle value* Math.PI /180 = Ray value
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";
}
offset+=50;
//A certain interval, callback this function
//A expression is calculated after the specified millisecond value. The first parameter is the expression, the second parameter is the time
setTimeout(startClock,80);// method of window object
}
//Define this clock to different positions as the mouse moves
function clockMove(event){
CX=event.clientX;//The x-coordinate of the mouse position
CY=event.clientY;//The y-coordinate of the mouse position
divCenterNode.style.left=(CX-50)+"px";
divCenterNode.style.top=(CY-30)+"px";
}
</script>
</head>
<body onmousemove="clockMove(event)">
<!--
1. Display 12 numbers in a circle
1/Create 12 DIVs, assign values 1--12 respectively
2/Locate 12 DIVs and form a circle.
-->
</body >
</html>
I originally wanted to make a clock display that could rotate and run. So the naming in the code is related to the clock, so I won’t be confused, dear. Beginners in JavaScript, I feel that JavaScript is very powerful.