<body>
<div id="divid" style="width:20px;height:20px;background: red;position:relative;"></div>
<script>
// hardcode：所有常数都是通过在代码中硬写，后期更改以及维护很麻烦
// 写代码步骤：1.调通demo；2.改善代码
function startLonger(){
var div = document.getElementById('divid');
var width = Number.parseInt(div.style.width); //div.style.width的值是'20px'
// console.log(width);
if(width<300){
width+=5;
div.style.width = width + 'px';
setTimeout('startLonger()',20);
}else{
div.style.width = '300px';
setTimeout('startShorter()',20);
}
}
function startShorter(){
var div = document.getElementById('divid');
var width = Number.parseInt(div.style.width);
// console.log(width);
if(width>=20){
width-=5;
div.style.width = width + 'px';
div.style.left = (300 - width) + 'px';
setTimeout('startShorter()',20);
}else{
div.style.width = '20px';
div.style.left = '280px'
// setTimeout('startLonger()',20);
}
}
setTimeout('startLonger()',20);
</script>
</body>
让进度条沿正方形边长走一圈
html
<div id="divid" style="width:20px;height:20px;background: red;position:relative;"></div>
js
var MAX = 300; //div的最长长度或宽度
var EDGE = 20; // div的最短长度或高度
var LENGTH = MAX - EDGE;
var INTERVAL = 20; //动画刷新的时间间隔，单位ms
var PERIOD = 1000;// 从EDGE涨到MAX，或从MAX小到EDGE的时间
var SPEED = Math.floor((LENGTH/PERIOD)*INTERVAL);
// 上面，变长
function startLongerTop(){
var div = document.getElementById('divid');
var width = Number.parseInt(div.style.width);
if(isNaN(width)){return;}
if(width<MAX){
width+=SPEED;
div.style.width = width + 'px';
setTimeout('startLongerTop()',INTERVAL);
}else{
div.style.width = MAX + 'px';
setTimeout('startShorterTop()',INTERVAL );
}
}
// 上面，变短
function startShorterTop(){
var div = document.getElementById('divid');
var width = Number.parseInt(div.style.width);
if(isNaN(width)){return;}
if(width>=EDGE){
width-=SPEED;
div.style.width = width + 'px';
div.style.left = (MAX - width) + 'px';
setTimeout('startShorterTop()',INTERVAL );
}else{
div.style.width = EDGE + 'px';
div.style.left = (LENGTH) + 'px';
setTimeout('startLongerRight()',INTERVAL );
}
}
// 右面，变长
function startLongerRight(){
var div = document.getElementById('divid');
var height = Number.parseInt(div.style.height);
if(isNaN(height)){return;}
if(height<MAX){
height+=SPEED;
div.style.height = height + 'px';
setTimeout('startLongerRight()',INTERVAL);
}else{
div.style.height = MAX + 'px';
setTimeout('startShorterRight()',INTERVAL );
}
}
// 右面，变短
function startShorterRight(){
var div = document.getElementById('divid');
var height = Number.parseInt(div.style.height);
if(isNaN(height)){return;}
if(height>EDGE){
height-=SPEED;
div.style.height = height + 'px';
div.style.top = (MAX - height) + 'px'
setTimeout('startShorterRight()',INTERVAL);
}else{
div.style.height = EDGE + 'px';
setTimeout('startLongerBottom()',INTERVAL );
}
}
// 下面，变长
function startLongerBottom(){
var div = document.getElementById('divid');
var width = Number.parseInt(div.style.width);
if(isNaN(width)){return;}
if(width<MAX){
width+=SPEED;
div.style.width = width + 'px';
div.style.right = MAX + 'px';
div.style.left = (MAX - width) + 'px';
setTimeout('startLongerBottom()',INTERVAL);
}else{
div.style.width = MAX + 'px';
setTimeout('startShorterBottom()',INTERVAL );
}
}
// 下面，变短
function startShorterBottom(){
var div = document.getElementById('divid');
var width = Number.parseInt(div.style.width);
if(isNaN(width)){return;}
if(width>=EDGE){
width-=SPEED;
div.style.width = width + 'px';
div.style.left = '0px';
setTimeout('startShorterBottom()',INTERVAL );
}else{
div.style.width = EDGE + 'px';
div.style.left = '0px';
setTimeout('startLongerLeft()',INTERVAL );
}
}
// 左面，变长
function startLongerLeft(){
var div = document.getElementById('divid');
var height = Number.parseInt(div.style.height);
if(isNaN(height)){return;}
if(height<MAX){
height+=SPEED;
div.style.height = height + 'px';
div.style.top = (MAX - height) + 'px';
setTimeout('startLongerLeft()',INTERVAL);
}else{
div.style.height = MAX + 'px';
setTimeout('startShorterLeft()',INTERVAL );
}
}
// 左面，变短
function startShorterLeft(){
var div = document.getElementById('divid');
var height = Number.parseInt(div.style.height);
if(isNaN(height)){return;}
if(height>EDGE){
height-=SPEED;
div.style.height = height + 'px';
div.style.top = '0px'
setTimeout('startShorterLeft()',INTERVAL);
}else{
div.style.height = EDGE + 'px';
setTimeout('startLongerTop()',INTERVAL );
}
}
setTimeout('startLongerTop()',INTERVAL);
最后进度条可以沿正方形走。
