js Realizes the Effect of Bomb Curtain Wall

In this paper, we share the specific code of js to realize the effect of bullet curtain wall for your reference. The specific contents are as follows

1. First of all, we must consider what the curtain wall needs: 1 wall, input box, launch button, close and open the barrage button, where the close and open are set to the same button;
2. Secondly, after the barrage goes up the wall, it needs to move from the rightmost to the leftmost of the wall. When it moves to the leftmost, the barrage will disappear;
3. The initial idea should be that when you enter the content you want to send in the input box, click the send button, and a new div will be created on the wall to contain this barrage content, and then give this div the corresponding mobile animation class;;

4. The barrage color is random, and there is an interval between single barrage;

Take random colors. What is used here is

"#"+(Math.random()*0x1000000<<0).toString(16)

First, write its static page;

<!-- Wall -->
<h1> Bomb curtain wall </h1>
<div id="container">

</div>
<!-- Barrage send off -->
<div class="s_c">
  <input id="message" type="text" placeholder=" Say something ">
  <div class="btn">
    <button id="sent"> Launch barrage </button>
    <button id="clear"> Close the barrage </button>
  </div>
</div>

css Style

#container{
  /*width:700px;*/
  height:500px;
  margin:50px 100px;
  border:solid 2px #7a2a1d;
}
h1{
  text-align:center;
}
.s_c{
  width:500px;
  margin:0 auto;
}
#message{
  width:400px;
  height:30px;
  margin:0 auto;
  position:relative;
  left:50px;
}
.btn{
  padding-top:20px;
  height:30px;
  margin-left:150px;
}
#sent,#clear{
  width:100px;
}

js code section:

var arr = [];// An array for storing barrage data; 
var start = true;// Used to judge whether the barrage needs to be opened 
  $(document).ready(function(){
    var showscreen = $("#container");// Curtain wall div
    var showHeight = showscreen.height();// Bomb curtain wall div The height of 
    var showWidth = showscreen.width();// Bomb curtain wall div Width of 
    // Click the launch button event 
    $("#sent").click(function(){
      var text = $("#message").val();// Get the barrage to be sent input by the user 
      $("#message").val("");// Empty the barrage sending area 
      arr.push(text);// Store the data into the array defined by the implementation to hold the barrage data 
      var send_div=$("<div>"+text+"</div>");
      showscreen.append(send_div);
      // var send_text=$("<div>+text+</div>");// New div Barrage bar 
      // var send_div = document.createElement("div");
      // var inner = document.createTextNode(text);
      // send_div.appendChild(inner);
      // document.getElementById("container").appendChild(send_div)// Hang the barrage on the wall 
      move_text(send_div);
    })
    // Press Enter to send 
     $("input").keydown(function(event){
       if(event.keyCode == 13){
         $("#sent").trigger("click");//trigger Triggers the specified event type of the selected element, triggering the #send Event's click Type 
       }
     })

     if(start==false){
       start = true;
       $("#clear").html(" Close the barrage ");
       run();
     }
     // Shut down / Open the barrage button click event 
    $("#clear").click(function(){
      if(start == true){
        start = false;
        $("#clear").html(" Open the barrage ");
        showscreen.empty();
      }else if(start == false){
        start = true;
        $("#clear").html(" Close the barrage ");
        run()
      }
    });
     var topMin = showscreen.offset().top;
     var topMax = topMin+showHeight;
     var top = topMin;
     var move_text = function(obj){
       obj.css({
         display:"inline",
         position:"absolute"
       })
       var begin = showscreen.width() - obj.width(); //1 The starting point of the beginning 
       top+=50;

       if(top > topMax-50){
         top = topMin;
       }
       //console.log("showscreenWidth"+showscreen.width());
       //console.log("objWidth",obj.width());

       obj.css({
         left:begin,
         top:top,
         color:getRandomColor()
       });

       var time = 20000 + 10000*Math.random();
       obj.animate({
         left:"-"+begin+"px"
       },time,function(){
         obj.remove();
       });
     };
    var getRandomColor = function(){
      return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6);
    }

    var run = function(){
      if(start == true){
        if(arr.length > 0){
          var n = Math.floor(Math.random()* arr.length + 1)-1;
          var textObj = $("<div>"+arr[n]+"</div>");
          showscreen.append(textObj);
          //console.log("loop:"+textObj.html());
          move_text(textObj);
        }
      }
      setTimeout(run,3000);
    }

    jQuery.fx.interval = 50;
    run();
})