Implement a pop-up app

Last Update:2017-10-05 Source: Internet

Author: User

Tags clear screen

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Function: Launch bomb screen, empty the bomb screen, realize the animation of the projectile screen

1, structure HTML;

<!DOCTYPE HTML><HTML><Head>    <title></title>    <Linkrel= "stylesheet"type= "Text/css"href= "Index.css" />
<!--introduction of JQ, Wild Dog Cloud sdk-->
    <Scriptsrc= "Js/jquery-1.11.1.js"></Script>    <Scriptsrc= "Https://cdn.wilddog.com/js/client/current/wilddog.js"></Script>    <Scriptsrc= "Js/dm.js"></Script></Head><Body><Divclass= "DM">    <!--Upper Part -    <Divclass= "Dm_screen">        <Divclass= "Dm_mask"></Div>        <Divclass= "Dm_show"></Div>    </Div>    <Divclass= "Send">        <Divclass= "S_filter">            <Divclass= "S_con">                <P>                    <inputplaceholder= "Say something?"class= "S_txt"type= "text" />                </P>                <P>                    <inputtype= "button"value= "Launch"class= "S_sub" />                      <inputtype= "button"value= "Clear Screen"class= "S_del" />                </P>            </Div>        </Div>    </Div></Div></Body></HTML>

The use of a wild dog cloud to store data is required to achieve the barrage function.

To register an account in Www.wildog.com, create an app reference:

var New Wilddog ("https://[appid].wilddogio.com/");

The first step is to submit the data to the wild dog cloud

$ ('. S_sub '). Click (function() {        /// get input box literal        var text = $ ('. S_txt '). Val ();         // writes the data to the cloud message node, child locates subnodes        Ref.child (' message '). Push (' text ');         // Empty the input field        $ ('. S_txt '). Val (');    });

The second step in response to the key click, that is, when you click the Enter button will trigger the event, the data submitted to the Wild Dog cloud, enter the key corresponding to 13

The trigger () method triggers the specified event type for the selected element.

// respond to Keystroke click events    $ ('. S_txt '). KeyPress (function() {        if(Event.keycode = = "") {            $ ('. S_ Sub '). Trigger (' click ');        }    });

Clear button, that is, the content of the curtain will be emptied after clicking

Remove ()-Deletes the selected element (and its child elements)
Empty ()-Removes child elements from the selected element

// Key Cleanup Event    $ ('. S_del '). Click (function() {        ref.remove ();         = [];        $ ('. S_show '). empty ();    });

Fourth step: Monitor the cloud data changes, cloud data changes, the frame of the data also changes.

Event snooping is the event-triggered way to get data that changes in the cloud. Capture and process data locally by listening to cloud events, keeping the data in real-time sync.

What we need to use is the child_added with the on() method (on () to listen to the data of the specified node in conjunction with the event. ) For more details

Https://docs.wilddog.com/sync/Web/guide/retrieve-data.html

function (snapshot) {        var text = snapshot.value;        Arr.push (text);         var textobj = $ ("<div class=\" dm_message\ "></div>");        Textobj.text (text);        $ ('. S_show '). Append (textobj);        Moveobj (textobj);    });
    Ref.on (' child_removed ',function() {        = [];        $ ('. S_show '). empty ();    });});

Display the contents of the barrage by time

varTopmin = $ ('. Dm_mask '). Offset (). Top;//the distance from the top of the display box    varTopMax = topmin+$ ('. Dm_mask '). Height ();//the distance from the top of the bottom distance    var_top = Topmin;//distance from top of each scrolling message    varMoveobj =function(obj) {var_left = $ ('. Dm_mask '). Width ()-obj.width (); _top= _top + 50; if(_top > (topMax-50) ) {_top=topmin;             } obj.css ({left: _left, Top: _top, Color:getrandomcolor ()}); varTime = 20000+10000*Math.random (); Obj.animate ({left:'-' +_left+ ' px '//The left distance decreases gradually .},time,function() {obj.remove ();        }); }

Get random colors

 var  getrandomcolor = function   () { return  ' # ' + (fu Nction   (h) { return  new  Array (7-h.length). Join (" 0 ") + H}) ((Math.random ()  * 0x1000000 << 0). toString (16 /*  Span style= "COLOR: #008000" >var getrandomcolor = function () {return ' # ' +math.floor (Math.random () *16777215). ToString ( 16);  */


Output on the screen
varfunction() {        if (arr.length > 0) {          var n = Math.floor ( Math.random () * arr.length + 1)-1;           var textobj = $ ("<div>" + arr[n] + "</div>");          $ (". Dm_show"). Append (textobj);          Moveobj (textobj);        }         );      }

Implement a pop-up app

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More