js刷新页面随机显示不同的div

最新推荐文章于 2023-02-23 11:14:26 发布

君子-如兰

最新推荐文章于 2023-02-23 11:14:26 发布

阅读量2.4k

点赞数

分类专栏： javascript vue.js 文章标签： javascript

本文链接：https://blog.csdn.net/ltmtianming/article/details/80955742

版权

vue.js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 1 订阅

订阅专栏

又是一个简单的小特效，可能会用的到

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#num1,#num2,#num3,#num4{
width: 200px;
height: 100px;
margin: 0 auto;
border: 1px solid red;
}
img{
width: 50px;
height: 50px;
padding-left: 75px;
}
.test{
width: 200px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="num1">
<img src="images/1.png" alt="">
<div class="test">张三</div>
</div>
<div id="num2">
<img src="images/2.png" alt="">
<div class="test">李四</div>
</div>
<div id="num3">
<img src="images/3.png" alt="">
<div class="test">王五</div>
</div>
<div id="num4">
<img src="images/4.png" alt="">
<div class="test">王6</div>
</div>
</body>
<script type="text/javascript">
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = document.getElementById("num3");
var num4 = document.getElementById("num4");
num1.style.display="none";
num2.style.display="none";
num3.style.display="none";
num4.style.display="none";
var arr = [num1,num2,num3,num4];
var changediv = Math.floor(Math.random()*arr.length);
console.log(changediv);
if(changediv==0){
num1.style.display="block";
}
if(changediv==1){
num2.style.display="block";
}
if(changediv==2){
num3.style.display="block";
}
if(changediv==3){
num4.style.display="block";
}
</script>
</html>