JavaScript implements a small feature of informational hints/

What's the situation. Csdn the layout How so many conditions, or I too time? The adjustment was not fixed several times. Last time ...

Recently due to company business problems. Need to do some public-facing platform, so the UI requirements will be a little higher,

For traditional alert, such a way to prompt a user to manipulate errors can obviously have a great impact on the customer experience. Then a small function was made to replace the original alert. Words do not wordy, first on.

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvdtaxmdu3mtkxmw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center ">

The principle of implementation is very easy. Use JS to generate a div. Then, when the need to prompt from the top:0, the place to start the movement, movement to the middle of the screen while waiting for a second to disappear, successive clicks on the first picture. There will be some overlap. The experience of prompting the user for error actions is still possible. Let's put the source code below:

It is also very convenient to call, the introduction of the Showtip (content) method can be, in this case, a multilayer gradient. But in the IE8 when the show only a single layer of color, slightly monotonous. (Note: The following methods are the motion frames that this example relies on, which are put together for the aspect call)

/** * Created by Zhou on 2014-12-09.    */function Showtip (content) {var left = parseint ((document.body.clientwidth-300)/2);    var top = parseint ((document.body.clientheight-50)/2);    var tipdiv = document.createelement ("div");    Tipdiv.classname = "Tip";    tipdiv.innerhtml = content; if (!document.head) {//IE8 does not support style.innerhtml notation, so.        Suppose the browser is IE8 can take the method of using JS to assign properties to deal with//document.head incompatible IE8 the following products, so this way can get the version of IE is 8 below, TipDiv.style.width = "300px";        TipDiv.style.height = "50px";        TipDiv.style.border = "1px solid blue";        TipDiv.style.lineHeight = "50px";        tipDiv.style.textAlign = "center";        TipDiv.style.zIndex = "9999";        tipdiv.style.position= "Absolute";        tipDiv.style.top = 0;        TipDiv.style.left = left + "px";        TipDiv.style.backgroundColor = "#A793FF"; Tipdiv.style.filter= "Progid:DXImageTransform.Microsoft.Gradient (gradienttype=0,startcolorstr= #3d69ff, Endcolorstr=white);} ";} else{//the advantage of writing attributes to CSS styles is that when a property is in multiple browsersCompatibility is not the same time without the use of writing JS logic code. var stylestr = ". tip{width:300px; height:50px; BORDER:1PX solid blue; Line-height:50px;text-align:center; "  + "z-index:9999; top:0; Left: "+left+" Px;filter:alpha (opacity=0); Opacity:0.5;position:absolute; " + "Background-color: #3d69ff; Background:-webkit-linear-gradient (top, #3d69ff, #a793ff, #a793ff, #cac2ff, white); " + "background:-moz-linear-gradient (top, #3d69ff, #a793ff, #a793ff, #cac2ff, white);" + "background:-ms-linear-gradient (top, #3d69ff, #a793ff, #a793ff, #cac2ff, white);" + "Background:linear-gradient (top, #3d69ff, #a793ff, #a793ff, #cac2ff, white);"  + "Filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0,startcolorstr= #3d69ff, endcolorstr=white);}        ";        var style = document.createelement ("style");        style.innerhtml = Stylestr;    Document.head.appendChild (style);    } document.body.appendChild (Tipdiv);      Domove (Tipdiv,{top:top,opacity:100},function () {  SetTimeout (function () {Domove () {tipdiv,{top:0,opacity:0},function () {//motion to top is 0, be careful to remove the component.            Otherwise it will cause a lot of rubbish, Occupy resources tipDiv.parentNode.removeChild (TIPDIV);        });    },1000); });}    function Domove (obj, Otarget, fn) {if (Obj.timer) {clearinterval (Obj.timer); } Obj.timer = SetInterval (function () {Move (obj, Otarget, fn)},}function Move (obj, Otarget, fn) {VA    R icur = 0;    var arr = "";    var bstop = true; For (arr. otarget) {if (arr = = "opacity") {//resolves Google Chrome incompatibility issues (Google gets opacity some errors, transparency does not reach the specified value            ) var temp = parsefloat (GetStyle (obj, ' opacity ')) * 100; Icur = Temp<otarget[arr]?        Math.ceil (temp): Math.floor (temp);        } else {icur = parseint (GetStyle (obj, arr));        } if (IsNaN (icur)) {icur = 0;        } var speed = (Otarget[arr]-icur)/40; Speed = speed > 0?        Math.ceil (Speed): Math.floor (speed); if (otargEt[arr]! = icur) {bstop = false;            } if (arr = = "opacity") {Obj.style.filter = "alpha" (Opacity: "+ (Icur + speed) +") ";        Obj.style.opacity = (icur + speed)/100;        } else {Obj.style[arr] = icur + speed + "px";        }} if (bstop) {clearinterval (Obj.timer);        Obj.timer = null;        if (FN) {fn ();    }}}function GetStyle (obj, property) {if (Obj.currentstyle) {//for IE return obj.currentstyle[property];        } else if (window.getComputedStyle) {//for FireFox and chrome Propprop = Property.replace (/([A-z])/g, "-$1");        Propprop = Property.tolowercase ();    return Document.defaultView.getComputedStyle (obj, null) [property];    } else {return null; }}

JavaScript implements a small feature of informational hints/