1861资源网：您身边、安全、高速、放心的专业下载站！
手机站 软件专题
1861资源网
热门搜索： 请搜索 软件： 相关信息 照明商店 搜索 教程：相关 爆裂点 照明商店 请输入 相关： 软件
您当前位置：首页 > 软件教程 > 代码特效 >> js刷新页面随机显示不同的div，刷新显示不同图片代码

js刷新页面随机显示不同的div，刷新显示不同图片代码

    <!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>
    ————————————————
     
代码特效 发布: 2022-04-29   修改: 2024-04-26   阅:   评:   点击报错反馈
上一篇 : font 文字颜色代码特效
下一篇 : Css+Div设置电脑端显示代码，手机端不显示隐藏代码
相关文章
本类最新发布
本类推荐
本类评论
留言与评论（共有 0 条评论）
验证码：
本类软件分类
文章总排行
文章月排行
装机必备软件
全站下载总排行

1861资源网

http://www.zywlyy.cn/

   |

1861资源网 软件下载

虚假投诉

免费注册

关于本站

联系我们

软件下载

驱动下载

安卓软件

苹果软件

安卓游戏

苹果游戏

mac下载

系统工具

编程软件

本站留言

单机游戏

软件教程

1861资源网

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢网络科技公司技术支持