使用JavaScript写的一个旋转的彩圈详解编程语言

testall.html           

<!DOCTYPE html> 
<html> 
<head> 
<script src="//C:/Users/wif/Desktop/jquery-1.11.3.min.js"></script> 
<script> 
for(var i=0;i<100000;i++) 
{ 
if(i%4==0) 
setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'40px solid yellow','border-top':'40px solid blue'})",2000*i); 
if(i%4==1) 
setTimeout("$('#div1').css({'border-left':'40px solid blue','border-bottom':'40px solid red','border-right':'40px solid green','border-top':'40px solid yellow'})",2000*i); 
if(i%4==2) 
setTimeout("$('#div1').css({'border-left':'40px solid yellow','border-bottom':'40px solid blue','border-right':'40px solid red','border-top':'40px solid green'})",2000*i); 
if(i%4==3) 
setTimeout("$('#div1').css({'border-left':'40px solid green','border-bottom':'40px solid yellow','border-right':'40px solid blue','border-top':'40px solid red'})",2000*i); 
} 
 
</script> 
<style> 
 
#div2{ 
width: 100px; 
    height: 100px; 
	 border-left: 40px solid red; 
    border-right: 40px solid yellow; 
    border-bottom: 40px solid green; 
	border-top:40px solid blue; 
	background-color:#FFFFFF; 
	border-radius:900px/900px; 
	display:none; 
	top:0px; 
	left:0px; 
	position:relative; 
	z-index:1; 
} 
#div1{ 
    width: 100px; 
    height: 100px; 
	 border-left: 40px solid red; 
    border-right: 40px solid yellow; 
    border-bottom: 40px solid green; 
	border-top:40px solid blue; 
	background-color:#FFFFFF; 
	border-radius:90px/90px; 
} 
</style> 
</head> 
 
<body> 
<p style="color:#FF0000">ÐýתµÄȦ</p> 
<div id="div1"></div> 
</body> 
</html>

js.png    

使用JavaScript写的一个旋转的彩圈详解编程语言

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8772.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论