JS操作属性

一.随机数的获取

　　使用 Math内置对象

Demo: 获取随机数0到1, 不包括1 

var random = Math.random();

console.log("获取的随机数是: "+random); 

 

Demo: 获取0-10的随机数

 var random = Math.random();

document.write("获取的随机数是: "+Math.floor((random*10+1))); 

 

二.操作节点属性

　　使用 js 获取一个元素对象, 就可以操作节点的数

Demo: 替换图片

html:

js:

 var img = document.getElementsByTagName("img")[0];

img.setAttribute("src","wsc.jsp"); 

第一个参数表示要替换的属性名, 第二个参数表示新的值.

 

Demo: 图片轮播

　　使用随机数以及img.setAttribute(name,value[index])方法进行操作

　　定时器函数:window.setInterval(要执行的代码, 多长时间执行一次)

第一种方式:

1 var imgs = new Array(); 2 imgs.push("wsc.jpg"); 3 imgs.push("gtx.jpg"); 4 imgs.push("ls.jpg"); 5 imgs.push("zzx.jpg"); 6 imgs.push("hgf.jpg"); 7 //获取img节点 8 var img = document.getElementsByTagName("img")[0]; 9 //替换图片的函数10 window.setInterval(function(){11     //随机0~5的数字作为下标12     var index = parseInt(Math.random()*5);13     //获取图片的属性值14     img.setAttribute("src",imgs[index]);15 },"500");

第二种方式: 使用 attributes 操作属性

1 var imgs = new Array(); 2 imgs.push("wsc.jpg"); 3 imgs.push("gtx.jpg"); 4 imgs.push("ls.jpg"); 5 imgs.push("zzx.jpg"); 6 imgs.push("hgf.jpg"); 7 var img = document.getElementsByTagName("img")[0]; 8 window.setInterval(function(){ 9     var index = parseInt(Math.random()*5);10     img.attributes[0].value = imgs[index]11 },"500");

Demo: 轮播到第五次的时候取消轮播功能

1 var imgs = new Array(); 2 imgs.push("wsc.jpg"); 3 imgs.push("gtx.jpg"); 4 imgs.push("ls.jpg"); 5 imgs.push("zzx.jpg"); 6 imgs.push("hgf.jpg"); 7 var img = document.getElementsByTagName("img")[0]; 8 var times=0; 9 var handler = window.setInterval(updateImgsSrc,"500");10 function updateImgsSrc(){11     var index = parseInt(Math.random()*5);12     img.attributes[0].value = imgs[index]13     times++;14     if (times==5){15         window.clearInterval(handler)16     }17 }