Home>

When writing a barrage case,The first thing to do is to know what to do at each step.

After setting up the framework first, you should prepare for the following steps when i want to send a barrage:

Get the content to send to the barrage,The content entered in the text box is obtained.Var str=$("#textbox id"). Val ();by jquery Generate an element:use jquery's var createspan=$("") to generate a span element for sending. Assign a value to the newly created span, that is, the value obtained in the text box createspan.text (str); Animate the elements,It is the elements that move.Use jquery's animate (css style value, time, method called after executing the animation). After executing the animation, manually remove the element you just added.

There are many details inside,If you look closely, you will gain something!

<! Doctype html>
<html>
<head>
<meta charset="utf-8" />
 <title>Barrage Case</title>
 <script src="http://libs.google.com/jquery/1.10.2/jquery.min.js"></script>
 <script>
 $(function () {
 var boxdom=$("#boxdom");
 //var domcontent=$("#domcontent");
 var top, right;
 var pagewidth=parseint ($(document) .width ());
 var pageheight=parseint ($(document) .height ());
 //click the button
 $("#btn"). bind ("click", auto);//Button binding method
 //press enter
 document.onkeydown=function () {
  if (event.keycode == 13) {
  auto ();
  }
 }
 function auto () {
 //1. Get the input string
 var str=$(". text"). val ();
 //2. Generate an element
 var createspan=$("&span class =" string "></span>");
 //3. Assign values ​​to the generated elements
 createspan.text (str);
 //For page friendliness,Clear the value you just entered
 $(". text"). val ("");
 //Generate a random position of the element,To make each barrage appear differently on the screen
 top=math.floor (math.random () * pageheight);
 createspan.css ({"top":top, "right":-400, "color":getrandomcolor ()});
 boxdom.append (createspan);
 //4. Set the element's animation effect,animate (css style value, time, method called after the animation is executed)
 //There are n spans on the page, only the last one will move
 var spandom=$("#boxdom>span:last-child");//find the last span
 spandom.animate ({"right":pagewidth + 300}, 10000, function () {
  //Remove element
  $(this) .remove ();
 });
 }
 //Define a method that can generate random colors,Can make each barrage different color
 function getrandomcolor () {
  var colorarr=["1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c "," d "," e "," f "];
  var color="";
  for (var i=0;i<6;i ++) {
  color +=colorarr [math.floor (math.random () * 16)];
  }
  return "#" + color;
 }
 });
 </script>
 <style type="text/css">
 html, body {
 margin:0px;
 padding:0px;
 width:100%;
 height:100%;
 font-family:"Microsoft Yahei";
 background:#ccc;
 }
 .boxdom {
 width:100%;
 height:100%;
 position:relative;
 overflow:hidden;
 }
 .iddom {
 width:100%;
 height:60px;
 background:#666;
 position:fixed;
 bottom:0px;
 }
 .contet {
 width:500px;
 height:40px;
 position:absolute;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 margin:auto;
 }
 .title {
 display:inline;
 font-size:24px;
 vertical-align:bottom;
 color:#ffffff;
 padding-left:300px;
 }
 .text {
 width:300px;
 height:30px;
 border:none;
 border-radius:5px;
 font-size:20px;
 margin-left:60px;
 }
 .btn {
 width:60px;
 height:30px;
 color:#ffffff;
 background-color:red;
 border:none;
 font-size:16px;
 margin-left:60px;
 margin-top:20px;
 }
 .string {
  width:300px;
  height:40px;
  margin-top:20px;
  position:absolute;
  color:#000;
  font-size:20px;
  font-family:"Microsoft Yahei";
 }
 </style>
</head>
<body>
<div class="boxdom" id="boxdom">
 <img src="../images/bg_2.jpg" />
 <div id="iddom" class="iddom">
 <div class="content">
  <p class="title">Say something:</p>
  <input type="text" class="text" />
  <Button type="button" class="btn" id="btn">send</button>
 </div>
 </div>
</div>
</body>
</html>
  • Previous C # method to embed dos form in Form
  • Next Example of using explode () function to cut a string into an array in PHP