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>
网友评论