标签:clear stop 返回 对象 停止 size function 字符串 mouse
1、登录系统
<!--输入框创建--> 账号:<input class="ipt" type="text"><br> 密码:<input class="ipt" type="password"><br> 验证码:<input id="yz_id" type="text"> <!--验证码创建--> <div id="yzm">加载中。。请稍候</div> <!--验证码刷新--> <button onClick="huan()">看不清,换一张</button> <!--验证码验证--> <button onClick="yz()">提交</button><br> <!--登录--> <button onClick="denglu()">登录</button>
//全局变量 var n = 0; //页面加载完成 window.onload=function(){ YZMpaixu(); huan(); } //随机验证码生成 function YZMpaixu(n=6){ var str = "123456789"; var sjs = ""; for(var i =0;i<n;++i){ sjs += str.substr(Math.random()*str.length,1); } document.getElementById(‘yzm‘).innerHTML= sjs; } //验证码刷新 function huan(){ YZMpaixu(n=6) } //验证登陆 function denglu(){ var ipt=document.getElementsByClassName("ipt"); var uid = ipt[0]; var pwd = ipt[1]; var uidval = uid.value; var pwdval = pwd.value; if(uidval == "" || pwdval == ""){ alert("账号或密码不能为空!"); return; } if(uidval == "admin"){ alert("登录成功!"); } } //验证验证码 function yz(){ var YZID=document.getElementById("yz_id"); var yzidval = YZID.value; if(yzidval == ""){ alert("验证码不能为空!"); return; } else if(yzidval == sjs){ alert("正确") } else{ alert("输入错误") } }
2、36选7 不重复
function buchong(){ var num = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36]; var jiguo = [];//数组定义 var nn = 0; for(var i =0;i<7;++i){ // 抽取数字 var n = parseInt(Math.random()*num.length); // 返回抽取数在jieguo数组的首次出现位置,没有返回-1 if(jiguo.indexOf(num[n]) < 0 ){ // 追加数字 jiguo.push(num[n]); }else{ i--; } nn++; } console.log(nn); console.log(jiguo); }
注;indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到字符串,则返回-1.
3、多选框
<!--多选框--> <input class="input" type="checkbox"> <input class="input" type="checkbox"> <input class="input" type="checkbox"> <input class="input" type="checkbox"> <input class="input" type="checkbox"> <input class="input" type="checkbox"> <input class="input" type="checkbox"><br> <button onClick="quanxuan()" id="button1">全选</button> <button onClick="fanxuan()">反选</button> <button onClick="buxuan()">不选</button><br><br><br>
//全选 var ipt = document.getElementsByClassName("input"); function quanxuan(){ for(var i = 0;i<ipt.length;i++){ ipt[i].checked=true; } } //反选 function fanxuan(){ for(var i = 0;i<ipt.length;i++){ if(ipt[i].checked==true){ ipt[i].checked=false; } else{ ipt[i].checked=true; } } } //不选 function buxuan(){ for(var i = 0;i<ipt.length;i++){ ipt[i].checked=false; } }
效果
4、轮播图
<div onMouseOver="stop()" onMouseOut="start()"style="margin: 0 auto;width: 100%;height: 300px;position: absolute;";> <!-- 图片导入--> <img id="add" src="1.jpg" alt="" width="80%" height="300px"> <!-- 操作按钮 --> <button onClick="xia()">上一页</button> <button onClick="zhong(0)">1</button> <button onClick="zhong(1)">2</button> <button onClick="zhong(2)">3</button> <button onClick="zhong(3)">4</button> <button onClick="shang()">下一页</button> </div>
//全局变量 var IntervalObj = null;//计时器对象 var n = 0;//下表定义 var imgPath = [‘1.jpg‘,‘8.jpg‘,‘12.jpg‘,‘9.jpg‘]; var add = null;//图片定义 //页面加载轮播 window.onload = function(){ add = document.getElementById("add"); // 计时器 IntervalObj = setInterval(function(){ add.src = imgPath[n]; n++; if(n >= imgPath.length){ n = 0; } },1000); } //鼠标移上停止 function stop(){ clearInterval(IntervalObj); } //移走开始 function start(){ IntervalObj = setInterval(function(){ add.src = imgPath[n]; n++; if(n >= imgPath.length){ n = 0; } },1000); } //上一页 function shang(){ n++; if(n >= imgPath.length){ n = 0; } add.src = imgPath[n]; } //下一页 function xia(){ n--; if(n <=-1){ n = imgPath.length-1; } add.src = imgPath[n]; } //点击换页 function zhong(nn){ add.src = imgPath[nn]; n = nn; }
标签:clear stop 返回 对象 停止 size function 字符串 mouse
原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9220430.html