JS操作属性-优快云博客

本文介绍如何使用JavaScript操作DOM属性，包括获取随机数、替换图片源及实现图片轮播效果。通过具体示例展示了如何利用Math.random()生成随机数，setAttribute方法更改图片源，以及如何设置定时器实现图片自动轮播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 }