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给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界面，图片大小，文字大小位置，按钮大小都可以进行优化

JS实现随机切换姓名与头像相关推荐

简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...
利用Math.random做背景图像随机切换【前端开发技能必备系列】
你应该见过(尤其是在一个网站的登录页面,比如:人人小站)这样的效果:每次登录的页面背景都是不同的.这说明该页面很有可能启用了背景随机切换的效果.最初见到这种效果的呈现时,觉得比较炫,后来仔细想想,这个 ...
php js抽奖,JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下. 用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点 ...
js实现随机选取[10,100)中的10个整数，存入一个数组，并排序。另考虑(10,100]和[10,100]两种情况。...
1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...
java 日期随机数_Java 生成指定时间范围的随机时间、随机中文姓名、随机字符姓名、随机数...
解决问题: Java生成指定时间范围的随机时间? Java生成随机中文姓名? Java生成随机字符姓名? Java生成随机数? 代码: import java.io.UnsupportedEncodi ...
利用python随机生成姓名的实例教程
本篇文章主要讲解:利用python随机生成姓名的实例教程作者:任聪聪整体思路在我们生成姓名的时候,一般我们要考虑的是姓名的组合构成,姓+名,姓是固定的,名是随机的,故此我们可以通过随机调用常用汉 ...
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
html自动切换文字,JS实现自动切换文字的导航效果代码
本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制 ...
html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用.下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展. 第一:背景图片 ...

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

JS实现随机点名

JS实现随机切换姓名与头像相关推荐

最新文章

热门文章