JS操作属性

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 }

 

posted @ 2019-04-27 21:02  笑长不爱笑QvQ  阅读(247)  评论(0)  编辑  收藏  举报