<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>多线程操作</title>
</head>
<body>
<p class="js-test-01"></p>
<p class="js-test-02"></p>
<p class="js-test-03"></p>
<p class="js-test-04"></p>
<script type="text/javascript" src="jQuery.v1.11.1.min.js"></script>
<script type="text/javascript">
var test =function(){
var num1=300;
var num2=600;
var num3=900;
var num4=1200;
function test01(){
for(var i=0;i<num1; i++){
$(".js-test-01").text(function(index,value){
return value+"-"+i;
});
};
$(".js-test-01").css({
border:"1px solid red"
})
$(".js-test-01").animate({
borderWidth:"30px "
},4000);
};
function test02(){
for(var i=num1;i<num2; i++){
$(".js-test-02").text(function(index,value){
return value+"-"+i;
});
};
$(".js-test-02").css({
border:"1px solid blue"
})
$(".js-test-02").animate({
borderWidth:"30px "
},10000);
};
function test03(){
for(var i=num2;i<num3; i++){
$(".js-test-03").text(function(index,value){
return value+"-"+i;
});
};
$(".js-test-03").css({
border:"1px solid black"
})
$(".js-test-03").animate({
borderWidth:"30px "
},6500);
};
function test04(){
for(var i=num3;i<num4; i++){
$(".js-test-04").text(function(index,value){
return value+"-"+i;
});
};
$(".js-test-04").css({
border:"1px solid purple"
})
$(".js-test-04").animate({
borderWidth:"30px "
},1000);
};
setTimeout( function(){
test01();
} , 100);
setTimeout( function(){
test02();
} , 100);
setTimeout( function(){
test03();
} , 100);
setTimeout( function(){
test04();
} , 100);
};
setTimeout(function(){
test();
},1000);
</script>
</body>
</html>
-
« 上一篇：
syntaxHighlighter 使用
-
屏幕分辨率大全
：下一篇 »