「已注销」 2022-01-21 15:45 采纳率: 85.7%
浏览 43
已结题

js写的点击播放按钮,应该跳出小窗口播放视频,但是点击的时候不起作用,小窗口跳不出来

用前端语言写了一个页面,其中有一个点击按钮跳出小窗口播放视频的功能,如图,点击1的时候,应该会出现2那个小窗口,但是现在点击1按钮不起作用,不知道什么原因,会前端的兄弟看看是什么原因,

img

html部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/quanbu.css">
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript" src="js/luobo.js"></script>
    <script type="text/javascript" src="js/tanchuang.js"></script>
    <script type="text/javascript" src="js/piaochuang.js"></script>
</head>


<body>
<div id="floatT">nihao</div>



<div id="tan">
    <div id="video"></div>
    <div id="cha">
        <a id="aa" href="#">X</a>
    </div>
</div>




<div class="header">
    <div class="wrap"><!--
        <ul class="header-left">
            <li><a href="#">商城</a><span>|</span></li>
            <li><a href="#">美</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">下载</a><span>|</span></li>
            <li><a href="#">协议</a><span>|</span></li>
        </ul>
        <ul class="header-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a><span>|</span></li>
            <li><a href="#"><i class="inconfont"></i>购物车</a><span>|</span></li>
        </ul>-->
        <div class="weather">
            <iframe width="150" scrolling="no" height="50" frameborder="0"
                    allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1">
            </iframe>
        </div>

        <div class="header-right1">
            <a href="#">添加微信
            <div class="erweima">
                <img src="img/10.jpg">
            </div>
            </a>
        </div>


    </div>
</div>

<div class="nav">
    <div class="wrap">
        <div class="logo">
            <a href="#">
                <img src="img/10.jpg">
            </a>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="#">打印机</a>
                    <div class="nav-bar-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>

                            </ul>
                        </div>

                    </div>
                </li>
                <li><a href="#" target="_blank">门禁系统</a></li>
                <li><a href="#" target="_blank">收银系统</a></li>
                <li><a href="#" target="_blank">电子秤</a></li>
                <li><a target="_blank" href="shouhou.html">售后</a></li>
                <li><a href="guanyu.html" target="_blank">关于我们</a></li>
            </ul>
        </div>
        <!--<div class="search"></div>                        -->
    </div>
</div>


<!-- 创建一个外部的div,来作为大的容器 -->
<div id="outer">
    <!-- 创建一个ul,用于放置图片 -->
    <ul id="imgList">
        <li class="src1"><img src="img/1.jpg"/>
            <a class="src1-box" href="shouhou.html">点击查看详情</a>
        </li>
        <li><img class="src2" src="img/2.jpg"/></li>
        <li><img class="src3" src="img/3.jpg"/></li>
        <li><img class="src4" src="img/4.jpg"/></li>
        <li><img class="src5" src="img/5.jpg"/></li>
        <li><img  class="src1" src="img/1.jpg"/></li>
    </ul>
    <!--创建导航按钮-->
    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>


<div class="container">
    <div class="wrap">

        <div class="phone">
            <div class="home-banner-box">
                <a href="#">
                    <img src="img">
                </a>
            </div>
            <h2 class="title">手机</h2>
            <div class="phone-box">
                <div class="phone-box-left">

                </div>
                <div class="phone-box-right">
                    <ul>
                        <li class="items"><a href="#"> rfff</a></li>
                        <li class="items"><a href="#"> </a></li>
                        <li class="items"><a href="#"> www</a></li>
                        <li class="items"><a href="#"> </a></li>
                        <li class="items"><a href="#"> </a></li>
                        <li class="items"><a href="#"> </a></li>
                        <li class="items"><a href="#"> </a></li>
                        <li class="items"><a href="#"> </a></li>
                    </ul>

                </div>

            </div>

        </div>
        <div class="video">
            <h2 class="title">视频</h2>

            <div class="video-box">
                <ul>
                    <li><a id="dianJi" href="javascript:;">
                        <div class="video-img">
                            <img src="img/1.jpg">
                            <div class="play">
                            <img src="img/66.jpg">
                            </div>

                        </div>
                        <p class="video-name">你好</p>
                    </a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </div>
        </div>



    </div>

</div>



</body>
</html>

css的代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,
button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center;}
li{list-style-type: none;}
a{text-decoration: none;color: #333}


.header{
    width: 100%;
    line-height: 40px;
    height: 50px;
    background-color: #e0e0e0;
    font-size: 12px;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.header-left{
    float: left;
}
.header-right{
    float: right;
}
.header li{
    float: left;
}
.header a{
    color: #b0b0b0;
    font-size: 12px;
}
.header a:hover{
    color: #fff;
}
.header span{
    color: #424242;
    margin: 0 6px;
}

.nav{
    position: relative;
    width: 100%;
    height: 100px;
//background-color:red;
}
.logo{
    margin-top: 16px;
    float: left;
    width: 66px;
    height: 66px;
    background-color: blue;
    border-radius: 50%;
}
.nav-bar{
    /*float: left;   */
    width:1200px;
    height: 100px;
    line-height: 100px;
    padding-left: 180px;




    box-sizing: border-box;


}
/*.search{
    float: left;
    width: 296px;
    height: 50px;
    background-color: blue;
}   */
.logo img{
    width: 100%;
    border-radius: 50%;
}
.nav-bar>ul>li{
    padding: 0 50px;
    float: left;
}


.nav-bar>ul>li>a:hover{
    color: deepskyblue;
    /*color: #ff6700;*/
}
.nav-bar-list{
    display: none;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 229px;
    background-color: white;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 3px 4px rgba(0,0,0,.18);
    z-index: 9;
}
.nav-bar li:hover>.nav-bar-list{
    display: block;
}
.nav-bar-list li{
    float: left;
    width: 204px;

    padding-top: 35px;

}
.nav-bar-list li img{
    width: 110px;

}
.nav-img-box{
    margin-left: 10px;
    width: 100%;
    height: 110px;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.nav-bar-list li:last-child .nav-img-box{
    border-right: none;
}
.nav-bar-list p{
    font-size: 12px;
    line-height: 20px;
}
.i{
    color: red;
}
.banner/*, .banner-box*/{
    width: 100%;
    height: 460px;
    background-color:yellow;
}
.banner-box{
    width: 100%;
    height: 460px;
    background-color: #ff6700;
}
.banner-box>img{
    height: 460px;
}
.container{
    width: 100%;
    height: auto;
    /*background-color: blueviolet;*/
    padding: 4px 0 12px;
}

.home-banner-box{
    width: 100%;
    height: 120px;
    background-color: aqua;
    margin: 22px 0;
}
.title{
    color: #333;
    font-size: 22px;font-weight: 200;
    text-align: left;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
    background-color: #ff6700;
}
.phone-box-left{
    float: left;
    width: 234px;
    height: 614px;
    background-color: blue;
}
.phone-box-right{
    float: right;
    width: 990px;
    height: 614px;
    background-color: #b0b0b0;

}
.items{
    float: right;
    width: 234px;
    height: 300px;
    background-color: #fff;
    margin-bottom: 14px;
    margin-left: 13px;
}



.qaz{
    background-color: #ff6700;
    height: 600px;
    width: 100%;

}
.video-box li{
    float: left;
    width: 296px;
    height: 285px;
    background-color: #ff6700;
    margin-bottom: 14px;
    margin-left: 14px;

}
.video-box li:first-child{
    margin-left: 0;
}
.video-img{
    width: 296px;
    height: 180px;
    position: relative;
    background-color: aqua;
    z-index: 0;
}
.video-img img{
    height: 180px;
    width: 296px;

}

.video-name{
    width: 268px;
    height: 21px;
    margin: 38px auto 6px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

.play{
    background-color: black;
    position: absolute;
    left: 40px;
    bottom: 30px;

    width: 46px;
    height: 36px;
    /*border: 2px solid #fff;
     box-sizing: border-box;*/
    border-radius: 12px;
}
.play img{
    width:100%;
    height: 36px;
    border-radius: 12px;
}

.weather{
    float: left;
    width: 150px;
    height: 50px;
}
.header-right1{
    margin-top: 5px;

    float: right;
    position: relative;
    height: 50px;
    width: auto;
}
.header-right1 a{
    font-size: 18px;
    color: #424242;
}
.header-right1 a:hover{
    /*background-image:url("img/1.jpg");*/
    color: dodgerblue;
}
.erweima img{
    width: 100px;
    height: 100px;
}
.erweima{

    display: none;
    position: absolute;



}
.header-right1 a:hover>.erweima{
    display: block;
}

.src1{
    position: relative;
}
.src1-box{
    position: absolute;
    left: 40px;
    bottom: 30px;
    width: auto;
    height: 60px;

}

#tan{
    position: fixed;
    top:20%;
    left: 35%;
    /*margin:200px auto;*/
    width:720px;
    height: 480px;
   /* width:720px;
    height: 480px;*/
    background-color: rgba(134, 0, 139, 0.67);
    display: none;
    /*z-index: 99;*/

}
#video{
    width:100%;
    height: auto;
}
#cha{
    width: 20px;
    height: 21px;
    padding-left: 7px;
    background-color: dodgerblue;
    position: absolute;
    right: 1px;
    top: 1px;

}


*{
    margin: 0;
    padding: 0;
}

/*
 * 设置outer的样式
 */
#outer{
    /*设置宽和高*/
    width:100%;
    height: 600px;
    /*居中margin: 50px auto;*/

    /*设置背景颜色*/
    /*background-color: greenyellow;*/
    /*设置padding   padding: 10px 0;*/

    /*开启相对定位*/
    position: relative;
    /*裁剪溢出的内容*/
    overflow: hidden;
}

/*设置imgList*/
#imgList{
    /*去除项目符号*/
    list-style: none;
    /*设置ul的宽度*/
    /*width: 2600px;*/
    /*开启绝对定位*/
    position: absolute;
    /*设置偏移量*/
    /*
     * 每向左移动520px,就会显示到下一张图片
     */
    left: 0px;
    z-index: -1;
}

/*设置图片中的li*/
#imgList li{
    /*设置浮动*/
    float: left;
    /*设置左右外边距      margin: 5px 10px;*/

}

/*设置导航按钮*/
#navDiv{
    /*开启绝对定位*/
    position: absolute;
    /*设置位置*/
    bottom: 15px;
    /*设置left值
         outer宽度  520
         navDiv宽度 25*5 = 125
             520 - 125 = 395/2 = 197.5
     * */
    /*left: 197px;*/
}

#navDiv a{
    /*设置超链接浮动*/
    float: left;
    /*设置超链接的宽和高*/
    width: 15px;
    height: 15px;
    /*设置背景颜色*/
    background-color: red;
    /*设置左右外边距*/
    margin: 0 5px;
    /*设置透明*/
    opacity: 0.5;
    /*兼容IE8透明*/
    filter: alpha(opacity=50);
    border-radius: 50%;
}

/*设置鼠标移入的效果*/
#navDiv a:hover{
    background-color: black;
}
#imgList img {

    width:1920px;
    height: 600px;
}

/*飘窗*/
#floatT{width: 80px;height: 80px;position: fixed;top: 100px;background-color: #ff6700;z-index: 10}

js的代码


var dianJi = document.getElementById('dianJi');
var tan = document.getElementById('tan');
var video = document.getElementById('video');
/*var cha = document.getElementById('cha');*/
var aa = document.getElementById('aa');

dianJi.onclick=function () {
    tan.style.display='block';
    video.innerHTML='<video width="100%" height="480px" src="vid/qaz.mp4" poster="" oncontextmenu="return false"></video>';
}
aa.onclick= function () {
        tan.style.display='none';
    }


  • 写回答

2条回答 默认 最新

  • Run_youngman 2022-01-21 16:43
    关注

    写的有点乱兄弟,你这代码也没贴全啊,说下实现思路,重点是通过display属性来控制显隐。

    <div id="button">点击</div>
    <video id="video" src="vid/qaz.mp4" style=”display:none“></video>
    

    js:

    var video = document.getElementById('video')
    var button= document.getElementById('button')
    button.onclick= function() {video.style.display="block"}
    

    有帮助记得点采纳。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月30日
  • 已采纳回答 1月22日
  • 修改了问题 1月21日
  • 创建了问题 1月21日

悬赏问题

  • ¥15 请问各位,如何在Jetson nano主控板的Ubuntu系统中安装PyQt5
  • ¥15 MAC安装佳能LBP2900驱动的网盘提取码
  • ¥400 微信停车小程序谁懂的来
  • ¥15 ATAC测序到底用什么peak文件做Diffbind差异分析
  • ¥15 安装ubantu过程中第一个vfat 文件挂载失败
  • ¥20 GZ::CTF如何兼容一些靶机?
  • ¥15 etcd集群部署问题
  • ¥20 谁可以帮我一下问一下各位
  • ¥15 为何重叠加权后love图的SMD与svyCreateTableOne函数绘制基线表的不一致
  • ¥150 求 《小魔指》街机游戏机整合模拟软件