parseInt:取整；
var _top=parseInt(5.66);//取整數，結果為5
位置排列
絕對定位，對坐標進行設置,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:不是固定的值，是根據調用的狀態改變的；
this指向，調用函數所在的對象（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>
多組值的循環；
使用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>
對象的循環;for in 循環
訪問對象的屬性：obj.a==obj['a']
<script>
var obj = {
a:1,
b:2,
c:'aaa'
}
for(var key in obj){
console.log('屬性名：'+key+' 屬性值：'+obj[key])
}
</script>
點擊切換圖片
見代碼:
<!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];//對應當前初始圖片
/*//添加點擊事件
//方式1：
for(var i=0;i<ali.length;i++){//for是為了設置每個li點擊的事件
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='';
}
//給當前點擊的圖片添加樣式
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';//設置當前選擇的圖片
cur=this.index;//更新cur的值
}
}
</script>
</body>
</html>
