使用JavaScript写的一个旋转的彩圈(未测试)
2016-07-22 13:41
477 查看
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多选框的全选与取消(未测试)
- JavaScript本地对象 内置对象 宿主对象
- JavaScript实现图片轮播(未测试)
- js正则表达式:验证邮箱格式、密码复杂度、手机号码、QQ号码(未测试)
- js 获取某个月份的天数(未测试)
- JavaScript去除数组中重复字符串(未测试)
- javascript实现求和
- JS中创建类的方法
- JavaScript数组求和高效率方法
- js 相关笔记
- js判断是否输入的是年份 (未测试)
- JavaScript 中的函数式编程实践
- Javascript计时器的实现(未测试)
- JavaScript取得字符串的长度(中文,日文)
- javascript 变量类型
- Javascript面试题
- JavaScript动画 —— 弹动动画 (未测试)
- js获取页面及个元素高度、宽度
- JavaScript的三大组成部分
- js面向对象编程