两个简单原生js小案例(点击弹出图层 + 全屏弹幕效果)_用原生js写一个点击小案例-优快云博客

本文介绍了一个防止冒泡的弹出图层示例和一个使用DOM操作、随机数生成全屏弹幕效果的教程。通过具体代码实现，展示了如何创建交互式的弹出窗口并控制其显示与隐藏，同时演示了如何在页面上动态生成并移动弹幕文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击弹出图层

最主要的知识：防止冒泡
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹出图层</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width:100%;
            height: 100%;
            overflow: hidden;
        }
        .btn{
            position: fixed;
            top: 100px;
            left: 150px;
            width: 100px;
            height: 30px;
            background: linear-gradient(to left, #f01080,#a87489);
            font-size: 14px;
            line-height: 30px;
            border-radius: 4px;
            font-weight: 400;
            text-align: center;
            cursor: pointer;
        }
        .wrapper {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.3);
            display: none;
        }
        .wrapper .box {
            margin: 100px auto;
            width: 600px;
            height: 400px;
            border: 1px solid #Ccc;
            position: relative;
        }
        .wrapper img{
            width: 100%;
            height: 100%;
        }
        .wrapper .span-box .right,
        .wrapper .span-box .left
        {
           position: absolute;
           top:50%;
           margin-top: -30px;
           width: 50px;
           height: 50px;
           background-color: rgba(255,255,255,0.3);
           text-align: center;
           color: #fff;
           font-weight: 700;
           font: 50px/50px "宋体";
           cursor: pointer;
        }
        .wrapper .span-box .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="btn" id="_btn">点我打开图层</div>
    <div class="wrapper" id="_wrapper">
        <div class="box" id="_box">
            <img src="images/1.png" alt=""id="_img">
            <div class="span-box">
                <span class="right" id="_right"> > </span>
                <span class="left" id="_left"> < </span>
            </div>
        </div>
    </div>
</body>
</html>
<script>
  function $(id){
    return document.getElementById(id);
  }
  var nowshow = 1;
  init();
  function init(){
      bindEvent();
  }
  function bindEvent(){
      $('_btn').addEventListener('click',function(){
          $('_wrapper').style.display = 'block';
      });
      $('_wrapper').addEventListener('click',function(){
        $('_wrapper').style.display = 'none';
      });
      // 防止冒泡
      $('_box').addEventListener('click',function(event){
        var event = event || window.event;
                // 考虑兼容
            if(event.stopPropagation)
            {
                event.stopPropagation();// w3c
            }
            else{
                event.cancelBubble = true;// ie
            }    
      });
      $('_right').addEventListener('click',function(){
          move(1);
      });
      $('_left').addEventListener('click',function(){
          move(-1);
      });
  }
  function move(num){
    nowshow += num;
    nowshow = nowshow >= 5? 5 : nowshow;
    nowshow = nowshow <= 1? 1: nowshow;
    $('_img').setAttribute('src','images/'+nowshow+'.png');
  }
</script>

全屏弹幕效果

简单的DOM操作、随机数的运用、简单的运动
在这里插入图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width:100%;
            height: 100%;
        }
        .wrapper{
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom,#add8e6,#f6f6f8);
            overflow: hidden;
        }
        .main{
            width: 600px;
            height: 400px;
            background-color: #fff;
            border:1px solid gray;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .bottom{
            width: 600px;
            margin: auto;
        }
        #text{
            padding-left:10px;
            outline: none;
            font-size: 12px;
            border: 1px solid #ccc;
            width: 150px;
            height: 20px;
            line-height: 20px;
        }
        #btn{
            margin-left: 8px;
            width: 40px;
            height: 20px;
            border: 1px solid #ccc;
            outline: none;
            border-radius: 2px;
            font-size: 12px;
        }
        span{
            position: absolute;
            right: 0;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="main" id="main">

        </div>
        <div class="bottom">
            <input type="text" id="text" placeholder="请输入...">
            <input type="button" id="btn" value="发送">
        </div>
    </div>
</body>
</html>
<script>
    // 获得元素
    var  main = document.getElementById('main');
    var text = document.getElementById('text');
    var btn = document.getElementById('btn');
    var speed = 5;
    // var timer = null;
    btn.addEventListener('click',function(){
        if(text.value == '')
        {
            alert('请输入内容');
        }
        else
        {  
            // 创建span
            var ospan = document.createElement('span');
            ospan.innerHTML = text.value;
            // 设置样式
            var ofontSize = Math.floor(Math.random()*16 + 16);// 随机大小
            var omax = main.offsetHeight - ofontSize;
            var omin = main.offsetTop;
            var oheight = omin + Math.random()*omax;
            ospan.style.fontSize = ofontSize + "px";
            ospan.style.top = oheight + 'px';
            main.appendChild(ospan);
            show(ospan);
            function show(obj){
                var w = obj.offsetWidth;
                obj.timer = setInterval(function(){
                    obj.style.left = (obj.offsetLeft - speed) + 'px';
                if(obj.offsetLeft <= -w)
                {
                    clearInterval(obj.timer);
                    obj.parentNode.removeChild(obj);
                }
                },50);
            }
            
        }
    });
</script>