Dom运用2

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;
}