标签：ntb 改变 键盘 auto 隐藏和显示 nload 随机 alert add
1.js引入方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 内联方式添加js代码 --> <input type="button" onclick="alert(‘试试就试试！‘)" value="点我试试"> <!-- 内部方式引入js --> <script type="text/javascript"> alert("内部引入成功！"); </script> <!-- 外部方式引入js 如果此标签引入了文件 就不能在标签体内继续写js代码--> <script type="text/javascript" src="first.js"></script> </body> </html>
外部引用的js文件-->first.js
alert("外部引入成功！");
2.方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" value="测试" onclick="fn1()"> <script type="text/javascript"> /* 无参无返回值 */ function fn1(){ alert("fn1执行！"); } //调用 //fn1(); /* 有参无返回值 */ function fn2(name,age){ alert(name+":"+age); } //调用 //fn2("张飞",18); /* 无参有返回值 */ function fn3(){ return "abc"; } //var str = fn3(); //alert(str); /* 有参有返回值 */ function fn4(x,y){ return x*y; } /* var result = fn4(3,8); alert(result); */ /* 第二种声明方法的方式 */ var fn5 = function(name,age){ alert(name+":"+age); } //fn5("刘备",20); /* 第三种声明方式 */ var fn6 = new Function("name","age" ,"alert(name+‘:‘+age)"); fn6("关羽",19); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="i1"> <input type="button" value="按钮" onclick="myfn()"> <div id="d1">div1</div> <script type="text/javascript"> function myfn(){ d1.innerText = i1.value; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="i1"> <input type="button" value="平方" onclick="myfn()"> <div id="d1"></div> <script type="text/javascript"> function myfn(){ //判断用户输入的内容是否是数值 if(isNaN(i1.value)){//不是数 d1.innerText = "输入错误!"; }else{//是数 d1.innerText = i1.value*i1.value; } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="i1"> <input type="button" value="猜一猜" onclick="myfn()"> <div id="d1">请输入0-100的数字</div> <script type="text/javascript"> //获取一个0-100的随机数 var x = parseInt(Math.random()*101); var count = 0; function myfn(){ count++;//计数 if(i1.value>x){ d1.innerText="大了"; }else if(i1.value<x){ d1.innerText="小了"; }else{ d1.innerText="恭喜你第"+count+"次猜对了!"; } } </script> </body> </html>
<meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" value="添加" onclick="myfn()"> <div id="d1"></div> <script type="text/javascript"> var x = 0; function myfn(){ x++; d1.innerHTML+="<h1>"+x+"</h1>"; } //开启定时器每隔1秒执行myfn方法 //setInterval(myfn,1000); var timer = setInterval(function(){ x++; d1.innerHTML+="<h1>"+x+"</h1>"; if(x==10){ //停止定时器 clearInterval(timer); } },1000); //只执行一次的定时器 setTimeout(function(){ alert("啦啦啦"); },3000); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div,img{ width: 200px; height: 150px; /* display: none; 让元素隐藏 */ } </style> </head> <body> <div> <img src="../imgs/a.jpg"> <img src="../imgs/k.jpg"> <img src="../imgs/1.jpg"> </div> <script type="text/javascript"> //得到页面中所有的图片共3个 var arr = document.getElementsByTagName("img"); for(var i=0;i<arr.length;i++){ if(i!=0){ arr[i].style.display="none"; } } //0 1 2 0 1 2 0 1 2 //如果需要使用往返数值则需要对一个 //不断自增的数值取余数 var x = 0; //开启定时器 setInterval(function(){ x++; //得到显示的下标 var index = x%3; //遍历数组 for(var i=0;i<arr.length;i++){ /* if(i==index){ arr[i].style.display="inline-block"; }else{ arr[i].style.dispaly="none"; } */ //控制隐藏和显示 arr[i].style.display= i==index?"inline-block":"none"; } },1000); </script> </body> </html>
3.js修改元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="i1"> <input type="button" value="添加" onclick="add()"> <input type="button" value="删除" onclick="del()"> <hr> <ul id="myul"> <li>北京</li> <li id="sh">上海</li> <li>广州</li> </ul> <script type="text/javascript"> function del(){ myul.removeChild(sh); } function add(){ //创建li var li = document.createElement("li"); //设置li的文本 li.innerText = i1.value; //添加到ul里面 myul.appendChild(li); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div,img{ width: 200px; height: 150px; } </style> </head> <body> <div> <img src="../imgs/a.jpg"> <img src="../imgs/b.jpg"> <img src="../imgs/c.jpg"> </div> <script type="text/javascript"> //获取所有的图片 var arr = document.getElementsByTagName("img"); //遍历每一张图片 for(var i=0;i<arr.length;i++){ //判断如果不是第一张则全部隐藏 if(i>0){ arr[i].style.display="none"; } } // 0 1 2 3 4 5 6 7 8 // 0 1 2 0 1 2 0 1 2 //如果需要一个往返的数值，则对一个自增数值取余即可 var x=0; setInterval(function(){ x++; //对自增数值取余数 得到需要显示的下标 var visibleIndex = x%3; //console.log(visibleIndex); //获取所有的图片 var arr = document.getElementsByTagName("img"); for(var i=0;i<arr.length;i++){ //如果i等于显示下标则显示否则隐藏 arr[i].style.display= i==visibleIndex?"inline-block":"none"; } },1000); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li onclick="myfn(this)">同事 <ul class="c1"> <li>马云</li> <li>马化腾</li> <li>王健林</li> </ul> </li> <li onclick="myfn(this)">亲戚 <ul class="c1"> <li>习大大</li> <li>老干妈</li> <li>马大姐</li> </ul> </li> <li onclick="myfn(this)">女朋友们 <ul class="c1"> <li>貂蝉</li> <li>王昭君</li> <li>武则天</li> </ul> </li> </ul> <script type="text/javascript"> //得到所有二层ul var arr = document.getElementsByClassName("c1"); //遍历每一个二层ul for(var i=0;i<arr.length;i++){ //让所有隐藏 arr[i].style.display="none"; } /* 把点击的li传递到了方法里面 */ function myfn(li){ //获取点击li里面的ul var ul = li.getElementsByTagName("ul")[0]; //如果隐藏则显示否则隐藏 ul.style.display= ul.style.display=="none" ?"block":"none"; //得到所有的二层ul //var arr = // document.getElementsByClassName("c1"); for(var i=0;i<arr.length;i++){ //找到不是点击的ul if(arr[i]!=ul){ arr[i].style.display="none"; } } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 当下拉选值发生改变的时候触发onchange --> <select id="s1" onchange="myfn()"> <option>请选择</option> <option value="0">河北省</option> <option value="1">山东省</option> <option value="2">河南省</option> </select> <select id="s2"> <option>请选择</option> </select> <script type="text/javascript"> var arr = [["秦皇岛","石家庄","唐山"], ["菏泽","青岛","烟台"], ["洛阳","安阳","郑州"]]; function myfn(){ //清空之前选择的城市信息 s2.innerHTML="<option>请选择</option>"; //alert(arr[s1.value]); //获取点击省份对应的城市数组 var cities = arr[s1.value]; //遍历城市数组 for(var i=0;i<cities.length;i++){ //创建option标签 var opt = document.createElement("option"); //把遍历的每一个城市名称设置给option opt.innerText = cities[i]; //把option添加到s2里面 s2.appendChild(opt); } } </script> </body> </html>
4.js事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ width: 500px; height: 500px; background-color: red; } </style> </head> <body> <input type="text" onkeydown="downfn()" onkeyup="upfn()"> <div onmouseover="del()" onmouseout="console.log(‘鼠标移出‘)" onmousedown="console.log(‘按下‘)" onmouseup="console.log(‘抬起‘)" onmousemove="console.log(‘移动‘)" id="d1">abcd</div> <script type="text/javascript"> function downfn(){ //获取按键编码 console.log("键盘按下:"+event.keyCode); } function upfn(){ //把按钮编码转成字符 console.log("键盘抬起:" +String.fromCharCode(event.keyCode)); } function del(){ //删除div document.body.removeChild(d1); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> body{ background-image: url("../imgs/a.jpg"); } </style> <script type="text/javascript"> //页面加载完时执行此方法 onload = function(){ d1.innerText = "abc"; //得到窗口的宽高 var w = document.body.parentElement.clientWidth; var h = document.body.parentElement.clientHeight; //修改body背景图片的尺寸 document.body.style.backgroundSize= w+"px "+h+"px"; } /* 窗口尺寸改变时调用此方法 */ onresize = function(){ //得到窗口的宽高 var w = document.body.parentElement.clientWidth; var h = document.body.parentElement.clientHeight; //修改body背景图片的尺寸 document.body.style.backgroundSize= w+"px "+h+"px"; } /* 获取焦点事件 和 失去焦点事件 */ onfocus = function(){ console.log("获取焦点"); } onblur = function(){ console.log("失去焦点"); } </script> </head> <body> <div id="d1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" value="属性事件绑定" onclick="fn1()"> <input type="button" value="动态绑定" id="b1"> <script type="text/javascript"> function fn1(){ alert("属性事件绑定触发"+this); } //动态绑定 b1.onclick = function(){ //动态绑定事件中你的this代表添加事件的标签 document.body.removeChild(this); alert("动态绑定触发"+this); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div,p,input{ border:1px solid red; } </style> </head> <body> <div onclick="myfn()"> <p> <input type="button" value="按钮"> </p> </div> <script type="text/javascript"> function myfn(){ //获取事件源 var obj = event.target||event.srcElement; //alert(obj.nodeName); //判断点击的是否是按钮 if(obj.nodeName=="INPUT"){ alert("点击的是按钮"); } } </script> </body> </html>
5.JQuery
<meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="i1"> <input type="text" id="i2"> <input type="button" value="按钮" id="b1"> <input type="button" value="按钮2" id="b2"> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> //js: onload = function(){} //jq中的页面面加载完成事件 $(function(){ //alert("jq引入成功！"); //通过id选择器得到按钮，给按钮添加事件 $("#b1").click(function(){ //alert("事件添加成功！"); //js：获取文本框的内容 //var i1 = document.getElementById("i1"); //alert(i1.value); //jq：获取文本框的内容 alert($("#i1").val()); }); $("#b2").click(function(){ alert($("#i2").val()); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="i1"> <input type="button" value="js转jq" id="b1"> <input type="button" value="jq转js" id="b2"> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> //给按钮1 添加事件 $("#b1").click(function(){ //得到js对象 var js = document.getElementById("i1"); //把js对象转成jq var jq = $(js); alert(jq.val()); }); $("#b2").click(function(){ //得到jq对象 var jq = $("#i1"); //把jq转成js对象 jq对象本质就是一个数组 var js = jq[0]; alert(js.value); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text"> <input type="button" value="添加最后面"> <input type="button" value="添加最前面"> <input type="button" value="插入上海前面"> <input type="button" value="插入上海后面"> <input type="button" value="删除上海"> <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> //给第一个按钮添加事件 $("input:eq(1)").click(function(){ //alert("xxx"); var li = $("<li></li>"); //取出文本框内容放进li li.text($("input:eq(0)").val());//等效innerText //把li添加到ul里面 $("ul").append(li); }); $("input:eq(2)").click(function(){ var li = $("<li></li>"); li.text($("input:eq(0)").val()); $("ul").prepend(li);//最前面 }); $("input:eq(3)").click(function(){ var li = $("<li></li>"); li.text($("input:eq(0)").val()); //得到上海 $("li:contains(‘上海‘)").before(li); }); $("input:eq(4)").click(function(){ var li = $("<li></li>"); li.text($("input:eq(0)").val()); //得到上海 $("li:contains(‘上海‘)").after(li); }); $("input:eq(5)").click(function(){ //得到上海 $("li:contains(‘上海‘)").remove(); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li>亲戚 <ul> <li>习大大</li> <li>马大姐</li> <li>二大爷</li> </ul> </li> <li>同事 <ul> <li>马云</li> <li>马化腾</li> <li>马冬梅</li> </ul> </li> <li>女朋友们 <ul> <li>貂蝉</li> <li>武则天</li> <li>乔碧萝</li> </ul> </li> </ul> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> //得到所有二层ul并隐藏 $("li>ul").hide(); //给第一层的li添加点击事件 $("body>ul>li").click(function(){ //this代表触发事件的元素 是js对象 //通过点击的li获取里面的ul，让其显示隐藏切换 $(this).children().toggle(); //通过li得到其他两个li再得到里面的ul并隐藏 $(this).siblings().children().hide(); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <select> <option>请选择</option> <option value="0">河北</option> <option value="1">山东</option> <option value="2">河南</option> </select> <select> <option>请选择</option> </select> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> var arr = [["唐山","秦皇岛","石家庄"], ["菏泽","济南","青岛"], ["郑州","新乡","洛阳"]]; $("select:first").change(function(){ //覆盖掉之前所选内容 达到清空的目的 $("select:last") .html("<option>请选择</option>"); //this代表触发事件的标签 是js对象 //jq:alert($(this).val()); //js:alert(this.value); var cities = arr[this.value]; //alert(cities); for(var i=0;i<cities.length;i++){ var opt = $("<option></option>"); //把遍历的城市名放到option里面 opt.text(cities[i]); //添加到第二个下拉选 $("select:last").append(opt); } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" placeholder="姓名"> <input type="text" placeholder="年龄"> <input type="text" placeholder="工资"> <input type="button" value="添加"> <table> <caption>员工列表</caption> <tr> <th>姓名</th><th>年龄</th> <th>工资</th><th>操作</th> </tr> </table> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $("input:last").click(function(){ var tr = $("<tr></tr>"); var nametd = $("<td></td>"); var agetd = $("<td></td>"); var saltd = $("<td></td>"); var deltd = $("<td><input type=‘button‘ value=‘删除‘></td>"); //给删除按钮添加点击事件 deltd.children().click(function(){ //alert("xxx"); //通过删除按钮自己 得到上级td再得到上级tr //$(this).parent().parent().remove(); tr.remove(); }); //把文本框内容取出放到td里面 nametd.text($("input:eq(0)").val()); agetd.text($("input:eq(1)").val()); saltd.text($("input:eq(2)").val()); //把td装进tr 把tr装进table tr.append(nametd); tr.append(agetd); tr.append(saltd); tr.append(deltd); $("table").append(tr); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> table{ border: 1px solid red; /* 将两条线合并成一条线 */ border-collapse: collapse; text-align: center; margin: 0 auto; } td,th{ border: 1px solid red; } </style> </head> <body> <table> <caption>特价商品</caption> <tr> <th>商品名称</th><th>商品单价</th> <th>商品库存</th><th>操作</th> </tr> <tr> <td>华为手机</td><td>5000</td><td>100</td> <td><input type="button" value="添加"></td> </tr> <tr> <td>苹果手机</td><td>3000</td><td>500</td> <td><input type="button" value="添加"></td> </tr> <tr> <td>篮球</td><td>200</td><td>30</td> <td><input type="button" value="添加"></td> </tr> <tr> <td>鼠标</td><td>30</td><td>200</td> <td><input type="button" value="添加"></td> </tr> </table> <table> <caption>购物车</caption> <tr> <th>商品名称</th><th>商品单价</th> <th>商品数量</th><th>商品金额</th> <th>操作</th> </tr> <tr> <td>总价：</td> <td colspan="4">0元</td> </tr> </table> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> //给页面中的按钮添加点击事件 $("input").click(function(){ var tr = $("<tr></tr>"); var nametd = $("<td></td>"); var pricetd = $("<td></td>"); var numtd = $("<td><input type=‘button‘ value=‘-‘ onclick=‘numfn(-1)‘><span>1</span><input type=‘button‘ value=‘+‘ onclick=‘numfn(1)‘></td>"); var moneytd = $("<td></td>"); var deltd = $("<td><input type=‘button‘ value=‘删除‘></td>"); //添加删除按钮的点击事件 deltd.children().click(function(){ //把按钮所在行删除 tr.remove(); calfn();//计算总价 }); //通过按钮本身得到上级td //再得到其他几个td //再获取第一个td里面的文本 var name = $(this).parent() .siblings().eq(0).text(); var price = $(this).parent() .siblings().eq(1).text(); /* ******************************** */ var b = false;//代表是否存在 $("table:last tr").each(function(){ var str = $(this).children().eq(0).text(); //如果相等说明已经存在 if(str==name){ //取出原来的数值 var n = $(this).children().eq(2).children().eq(1).text(); n = parseInt(n);//把字符串转成数值 //把原来的值取出+1再放回去 n++; $(this).children().eq(2).children().eq(1).text(n); b = true; //让单价*数量 把值放到 $(this).children().eq(3).text(price*n); } }); if(b){//如果判断出已经存在则不再添加 return; } /* ******************************** */ //alert(price); nametd.text(name); pricetd.text(price); moneytd.text(price); //把5个td添加到tr里面 tr.append(nametd); tr.append(pricetd); tr.append(numtd); tr.append(moneytd); tr.append(deltd); //把tr添加到最后一个tr的前面 $("tr:last").before(tr); calfn();//计算总价 }); //点击+-按钮时触发的方法 function numfn(x){ //事件源:触发事件的标签 //只有动态绑定的事件方法中this代表的才是事件源 //获取事件源的另外一种方式： var obj = event.target||event.srcElement; //obj就是事件源(用户点击的+-按钮) //得到原来的数值 var num = parseInt($(obj).siblings("span").text()); //alert(num); num += x; $(obj).siblings("span").text(num); //如果数量为0就删除整行 if(num==0){ $(obj).parent().parent().remove(); } //获取单价 var price = $(obj).parent().prev().text(); //alert(price); //把单价和数量乘积赋值到金额里面 $(obj).parent().next().text(price*num); calfn();//计算总价 } //声明计算的方法 function calfn(){ var total = 0; //得到第二个table里面的每一行 并遍历 $("table:last tr").each(function(){ //得到当前tr里面第4个孩子的文本内容 //this 代表的是当前遍历的tr var money = parseInt($(this).children() .eq(3).text()); if(!isNaN(money)){//排除第一行和最后一行 //把money累加到一起 total+=money; } }); //alert(total); $("td:last").text(total+"元"); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" value="点我试试" onclick="alert(‘试试就试试‘)"> <div>hover方法测试</div> <div>hover方法测试</div> <div>hover方法测试</div> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> setTimeout(function(){ //事件模拟 $("input").trigger("click"); },3000); //添加鼠标移入移出事件 $("div").hover(function(){//当鼠标移入执行 $(this).css("color","red"); },function(){//当鼠标移出执行 $(this).css("color","green"); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> img{ width: 200px; height: 150px; position: relative;/* 相对定位 */ } </style> </head> <body> <input type="button" value="隐藏"> <input type="button" value="显示"> <input type="button" value="淡入"> <input type="button" value="淡出"> <input type="button" value="上滑"> <input type="button" value="下滑"> <input type="button" value="自定义"> <hr><!-- 水平分割线 --> <img src="../imgs/2.gif"> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> $("input:eq(0)").click(function(){ //隐藏动画，第一个参数时间间隔, //第二个参数动画完成时执行的方法 $("img").hide(3000,function(){ $("img").show(1000); }); }); $("input:eq(1)").click(function(){ //显示动画 $("img").show(3000); }); $("input:eq(2)").click(function(){ //淡入动画 $("img").fadeIn(1000); }); $("input:eq(3)").click(function(){ //淡出动画 $("img").fadeOut(1000); }); $("input:eq(4)").click(function(){ //上滑动画 $("img").slideUp(2000); }); $("input:eq(5)").click(function(){ //下滑动画 $("img").slideDown(2000); }); $("input:eq(6)").click(function(){ //自定义动画 $("img").animate({"left":"200px"},1000) .animate({"top":"200px"},1000) .animate({"left":"0"},1000) .animate({"top":"0"},1000) .animate({"width":"400px", "height":"300px"},1000) .animate({"width":"200px", "height":"150px"},1000) .fadeOut(1000); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> setInterval(function(){ //创建图片标签 var img = $("<img src=‘../imgs/2.gif‘>"); //设置绝对定位 img.css("position","absolute"); //获取0-1000的随机数 var top = parseInt(Math.random()*1000); //把随机数给到图片 img.css("top",top+"px"); //添加到body中 $("body").append(img); //右侧移动1000像素持续1秒 然后淡出 再删除 img.animate({"left":"1000px"},1000) .fadeOut(1000,function(){ img.remove(); }); },100); </script> </body> </html>
标签：ntb 改变 键盘 auto 隐藏和显示 nload 随机 alert add
原文地址：https://www.cnblogs.com/hello4world/p/12178669.html
