网站如何做熊掌号,沧州网站建设培训学校,如何让wordpress文本小工具支持php和简码?,深圳仿站定制模板建站元素的属性设置
1.目标
掌握图片的src属性的设置
在页面使用img标签显示一张图片, 点击这个图片更换一张新的图片
2.实现思路
使用img 指定src “路径” 指定id“one”获取img标签#xff0c; 添加onclick 点击事件在事件处理程序函数体中修改图片的src的值
3.代码实…元素的属性设置
1.目标
掌握图片的src属性的设置
在页面使用img标签显示一张图片, 点击这个图片更换一张新的图片
2.实现思路
使用img 指定src “路径” 指定id“one”获取img标签 添加onclick 点击事件在事件处理程序函数体中修改图片的src的值
3.代码实现 // 1.获取图片var img document.getElementById(one);// 2.给img添加点击事件img.onclick function () {// 修改图片的src// console.log(img.src);img.src ./imgs/zxc.jpg}4.总结
元素对象.属性名 访问对象上的属性
元素对象.属性名 “值” 给对象上的属性修改内容
5.图片切换的案例
1.目标
掌握图片切换案例
页面上使用img标签显示一张图片, 点击这张图片可以随机更换新的图片
2.实现思路
定义数组存放所有图片的路径 值是字符串封装从minmax之间的随机数, min max 数组的下标 [0, 数组的长度-1]调用随机数函数得到随机下标 数组名[随机下标] 得到随机图片路径给图片元素对象的src赋值
3.代码实现 // 1.获取图片var img document.getElementById(one);// 定义数组 保存所有图片的路径var arr [./imgs/1.jpg,./imgs/2.jpg,./imgs/3.jpg,./imgs/4.jpg,./imgs/5.jpg,./imgs/6.jpg,./imgs/7.jpg,./imgs/8.jpg,./imgs/9.jpg,./imgs/10.jpg,./imgs/11.jpg];// 2.给img添加点击事件img.onclick function () {// 修改图片的src// console.log(img.src);// img.src ./imgs/1.jpg// 获取随机下标 var index random(0, arr.length-1);img.src arr[index];// console.log(arr[index]);}function random (min,max) {return Math.floor(Math.random() * (max - min 1) min);}
4.总结
1.随机数封装
function 函数名 (min, max) {return Math.floor(Math.random() * (max - min 1) min)
}2.数组的访问 数组名[下标] 随机数生成下标 [0, 数组的长度-1]
