JS操作属性
一.随机数的获取
使用 Math内置对象
Demo: 获取随机数0到1, 不包括1
1 var random = Math.random();
2 console.log("获取的随机数是: "+random);
Demo: 获取0-10的随机数
1 var random = Math.random();
2 document.write("获取的随机数是: "+Math.floor((random*10+1)));
二.操作节点属性
使用 js 获取一个元素对象, 就可以操作节点的数
Demo: 替换图片
html:
<body> <img src="wjl.jpg"> </body>
js:
1 var img = document.getElementsByTagName("img")[0];
2 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 }