parseInt:取整；
var _top=parseInt(5.66);//取整數(shù)，結(jié)果為5
位置排列
絕對定位，對坐標(biāo)進(jìn)行設(shè)置,js代碼如下：
<script>
for(var i=0;i<100;i++){
var left=i%10 *(50+10);
var _top=parseInt(i/10)*(50+10);
document.body.innerHTML+='<div style="left:'+left+'px;top:'+_top+'px;">'+i+'</div>';
}
</script>
V型js代碼：
<script>
for(var i=0;i<9;i++){
var left=i*(50+10);
if(i<5){
var _top=i*(50+10);
}else{
var _top=(8-i)*(50+10);
}
document.body.innerHTML+='<div style="left:'+left+'px;top:'+_top+'px">'+i+'</div>';
}
</script>
this
window:js的所有代碼都在window下；
this:不是固定的值，是根據(jù)調(diào)用的狀態(tài)改變的；
this指向，調(diào)用函數(shù)所在的對象（this指向的都是一個對象）
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<script>
var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].onclick=function(){
alert(this.innerHTML)
}
}
</script>
多組值的循環(huán)；
使用index;
<body>
<button>0</button>
<button>0</button>
<button>0</button>
<button>0</button>
</body>
<script>
var obtn=document.getElementsByTagName('button');
var arr=['a','b','c','d'];
for(var i=0;i<obtn.length;i++){
obtn[i].index=0;
obtn[i].onclick=function(){
this.innerHTML=arr[this.index];
this.index++;
if(this.index==arr.length){
this.index=0;
}
}
}
</script>
對象的循環(huán);for in 循環(huán)
訪問對象的屬性：obj.a==obj['a']
<script>
var obj = {
a:1,
b:2,
c:'aaa'
}
for(var key in obj){
console.log('屬性名：'+key+' 屬性值：'+obj[key])
}
</script>
點(diǎn)擊切換圖片
見代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
position:absolute;
top:-10px;
right:0;
}
ul>li{
width:50px;
height:50px;
background:#ccc;
margin-top:10px;
}
.box{
width:500px;
height:600px;
border:1px solid #ccc;
margin:50px auto;
position:relative;
}
.active{
background:#f10180;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="" width="420px"height="600px">
<ul>
<!-- <li></li>
<li class="active"></li>
<li></li>
<li></li> -->
</ul>
</div>
<script>
var ali=document.getElementsByTagName('li');
var arr=['images/1.jpg','images/a.jpg','images/b.jpg','images/c.jpg','images/c.jpg','images/c.jpg']
var img=document.getElementsByTagName('img')[0];
var ul=document.getElementsByTagName('ul')[0];
//初始化：
var cur=0;
for(var i=0;i<6;i++){
if(i==cur){
ul.innerHTML+='<li class="active"></li>'
}else{
ul.innerHTML+='<li></li>'
}
}
img.src=arr[cur];//對應(yīng)當(dāng)前初始圖片
/*//添加點(diǎn)擊事件
//方式1：
for(var i=0;i<ali.length;i++){//for是為了設(shè)置每個li點(diǎn)擊的事件
ali[i].index=0;//添加索引，
ali[i].onclick=function(){
img.src=arr[this.index];//圖片改變路徑
this.index++;
//清除每一個li的樣式
for(var i=0;i<ali.length;i++){
ali[i].className='';
}
//給當(dāng)前點(diǎn)擊的圖片添加樣式
this.className='active';
}
}*/
//方式2：
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onclick=function(){
img.src=arr[this.index];//圖片改變路徑
ali[cur].className='';//取消上一次li的樣式
this.className='active';//設(shè)置當(dāng)前選擇的圖片
cur=this.index;//更新cur的值
}
}
</script>
</body>
</html>
