A classic summary of javascript's various questions about sports
- 2020-06-01 08:20:12
- OfStack
This article summarizes various problems of javascript about sports by example. Share with you for your reference. The details are as follows:
1. Various problems of the JS movement
Question 1:
Error code:
function startMove(){
var timer=null;
var div1=document.getElementById("div1");
if (div1.offsetLeft==300){
clearInterval(timer);
}else{
timer=setInterval(function(){
div1.style.left=div1.offsetLeft+10+"px";
},30)
}
}Desired functionality:
Turn on the timer timer, let div1 move to 300px, and then turn off the timer when div1 stops.
What went wrong:
if statement error. The code first sets an null timer timer and then turns off the timer timer if the left margin of div1 is 300px. Otherwise 1 goes straight. However, if is not a loop statement, and the if statement will not be executed after one execution. So you never turn off the timer.
Correct code:
var timer=null;
function startMove(){
var div1=document.getElementById("div1");
timer=setInterval(function(){
if (div1.offsetLeft==300){
clearInterval(timer);
}
div1.style.left=div1.offsetLeft+10+"px";
},30)
}
Question 2:
Error code:
function startMove(){
var speed=1;
var timer=null;
var oDiv1=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
if (oDiv1.offsetLeft>=300){
clearInterval(timer);
}else{
oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
}
},30)
}Desired functionality:
Click the start button continuously, and div1 will accelerate. This is because every time you click the button once, a timer will be started, which will accelerate when accumulated. Therefore, before starting the timer, whether there is a timer or not, you should first close the timer for 1 time. But when you add the clearInterval method to turn off the timer, you still accelerate.
What went wrong:
Putting the timer variable in the startMove method is equivalent to executing the startMove method once every button is clicked, which generates a closure. Therefore, a local timer is created. timer in each closure will not be Shared, so it is equivalent to generating the closure timer for the number of clicks.
Correct code:
var timer=null;
function startMove(){
var speed=1;
var oDiv1=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
if (oDiv1.offsetLeft>=300){
clearInterval(timer);
}else{
oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
}
},30)
}
Share in and out function:
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 150px;
height: 200px;
background: burlywood;
position: absolute;
left: -150px;
}
span{
width: 20px;
height: 60px;
position: absolute;
background: gold;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
oDiv1.onmouseover=function(){
move(0);
};
oDiv1.onmouseout=function(){
move(-150);
};
};
var timer=null;
function move(target){
var oDiv1=document.getElementById("div1");
var speed=0;
if (oDiv1.offsetLeft<target){
speed=10;
}else{
speed=-10;
}
clearInterval(timer);
timer=setInterval(function(){
if(oDiv1.offsetLeft==target){
clearInterval(timer);
}else{
oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span id="span1"> Share the </span>
</div>
</body>
</html>
Image fading in and out function:
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
oDiv1.onmouseover=function(){
move(100);
};
oDiv1.onmouseout=function(){
move(30);
};
};
var timer=null;
var alpha=30;
function move(target){
var oDiv1=document.getElementById("div1");
var speed=0;
clearInterval(timer);
if(alpha<target){
speed=10;
}else{
speed=-10;
}
timer=setInterval(function(){
if (alpha==target){
clearInterval(timer);
}else{
alpha+=speed;
oDiv1.style.filter="alpha(opacity:"+alpha+")";
oDiv1.style.opacity=alpha/100;
}
},30);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html> Note:
1. Because JavaScript does not have a property like the left margin (offsetLeft) on transparency. So I'm going to replace it with one variable, alpha.
2. The interline transparency setting of JavaScript code needs to consider the compatibility of the browser. The setting method of ie browser is oDiv1.style.filter ="aplha(opacity:"+aplha+")";
chrome and firefox are oDiv1.style.opacity =alpha/100.
Implement scrollbar events:
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: yellowgreen;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<script>
window.onscroll=function(){
var oDiv=document.getElementById("div1");
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
};
var timer=null;
function move(target){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=(target-oDiv.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (oDiv.offsetTop==target){
clearInterval(timer);
}else{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
},30)
};
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>2. Various problems of JS multi-object movement
Question 1:
What you want to achieve: 3 parallel div free parallel scaling.
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 50px;
background: yellow;
margin: 10px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for (var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].onmouseover=function(){
move(300,this);
};
oDiv[i].onmouseout=function(){
move(100,this);
};
}
};
function move(iTarget,oDiv){
clearInterval(oDiv.timer);
oDiv.timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetWidth)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (iTarget==oDiv.offsetWidth){
clearInterval(oDiv.timer);
}else{
oDiv.style.width=oDiv.offsetWidth+speed+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>Matters needing attention:
Objects more exercise if only set a timer (a) set the global timer, then three div share 1 1 global timer, so when a div narrow unfinished action stretch another 1 div open timer implementation, because the timer is global, so on a div timer will be overwritten or cancelled, so on a timer cannot be completely to reduce action last night, the solution is to give each timer 1 div set 1 attribute.
Question 2:
What you want to do: fade in and out of multiple images.
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
margin: 10px;
background: yellow;
float: left;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].alpha=30;
oDiv[i].onmouseover=function(){
move(100,this);
};
oDiv[i].onmouseout=function(){
move(30,this);
};
}
};
function move(iTarget,obj){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.alpha)/30;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (obj.alpha==iTarget){
clearInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter="alpha(opacity:"+obj.alpha+")";
obj.style.opacity=obj.alpha/100;
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>Want to achieve the function: multiple objects in different directions of the expansion function.
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
margin: 10px;
background: yellow;
float: left;
border: 10px solid black;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
oDiv1.timer=null;
oDiv2.timer=null;
oDiv1.onmouseover=function(){
move(this,400,'height');
};
oDiv1.onmouseout=function(){
move(this,100,'height');
};
oDiv2.onmouseover=function(){
move(this,400,'width');
};
oDiv2.onmouseout=function(){
move(this,100,'width');
};
};
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
};
function move(obj,iTarget,name){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,name));
var speed=(iTarget-cur)/30;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
obj.style[name]=cur+speed+"px";
}
},30);
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>Matters needing attention:
1.offsetwidth obtains not only the pure width of the object, but also its widening and margins. So in obj. style. width = obj. offsetwidth - 1 + "px"; If the width of the border is set to 1px instead of 0px, then offsetwidth is width of obj +2.width= obj.style.width =obj +2-1+ "px"; Instead, the image gets bigger. The solution is not offsetwidth, but width of obj. width is obtained by the getStyle method.
2.getStyle method yields string. You need to cast the number type with parseint.
Complete motion framework:
var timer=null;
function startMove(){
var div1=document.getElementById("div1");
timer=setInterval(function(){
if (div1.offsetLeft==300){
clearInterval(timer);
}
div1.style.left=div1.offsetLeft+10+"px";
},30)
}I hope this article is helpful for you to design javascript program.