JS实现随机切换姓名与头像

最新推荐文章于 2024-04-23 11:04:30 发布

_Serverless

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量1.6k

点赞数 3

分类专栏：前端文章标签： js css html5

本文链接：https://blog.csdn.net/weixin_44145731/article/details/111297888

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS实现随机点名

1.功能需求
点击“随机切换”按钮时，随机切换姓名与头像图片，采用图片缓存加快运行速度
2.程序结构设计
在html同目录下创建img文件夹，放入1.jpg,2.jpg,3.jpg,4.jpg 4张图片
body{
span 存放姓名
img 设置图片
input 设置按钮 onclick - change() 点击响应函数
}
script{
新建系统图片对象
给图片对象设置地址src
图片数组与姓名数组存放所有图片元素与元素姓名
随机切换函数：生成随机数，DOM对象通过id给span与img赋值
}

3.程序代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机点名</title>
</head>
<body>
  <p><span id="span1"></span></p>
  <p><img src="img/1.jpg" id="imgx" style="width:200px;height:200px;"></p>
  <p><input type="button" value="随机切换" onclick="change()"></p>
</body>
<script type="text/javascript">
    var imgobj2 = new Image();//图片对象用于提前提取图片地址
    var imgobj3 = new Image();  
    var imgobj4 = new Image();
    var imgobj1 = new Image();

    //将图片地址放入图片对象中
    imgobj1.src="/img/1.jpg";
    imgobj2.src="/img/2.jpg";
    imgobj3.src="/img/3.jpg";
    imgobj4.src="/img/4.jpg";

//用数组存储图片对象与姓名对象
    var imgArr=[imgobj1,imgobj2,imgobj3,imgobj4];
    var nameArr=["曹操","刘备","孙权","袁绍"];

//随机切换函数
    function change(){
      var num=Math.floor(Math.random()*nameArr.length);
      document.getElementById("span1").innerText=nameArr[num];
      document.getElementById("imgx").src=imgArr[num].src;
    }
</script>
</html>

4.测试与优化
4.1测试：在按钮点击响应函数效果是否与理想情况匹配
4.2优化：UI界面，图片大小，文字大小位置，按钮大小都可以进行优化

_Serverless

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
JS实现随机切换姓名与头像

JS实现随机点名1.功能需求点击“随机切换”按钮时，随机切换姓名与头像图片，采用图片缓存加快运行速度2.程序结构设计在html同目录下创建img文件夹，放入1.jpg,2.jpg,3.jpg,4.jpg 4张图片body{span 存放姓名img 设置图片input 设置按钮 onclick - change() 点击响应函数}script{新建系统图片对象给图片对象设置地址src图片数组与姓名数组存放所有图片元素与元素姓名随机切换函数：生成随机数，DOM对象通过id给s
复制链接

扫一扫