JSDOM

最新推荐文章于 2024-10-10 10:50:43 发布

大佬之下第∞人

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量105

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/XIAOyoou/article/details/108331831

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span_see{
            cursor: pointer;
        }
        #verifysubmit{
            cursor: pointer;
        }
    </style>
</head>
<body>

<div style="width: 400px; height: 600px ; background: white">
    <table cellspacing="10px">
        <tr>
            <td align="right">注册邮箱:</td>
            <td><input type="text" placeholder="请输入邮箱或手机号..." name="register"></td>
        </tr>
        <tr>
            <td></td>
            <td>你还可以用手机注册</td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>真实姓名:</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td><input type="radio" name="gender" value="man">男
                <input type="radio" name="gender" value="woman">女
            </td>
        </tr>
        <tr>
            <td align="right">生日:</td>
            <td>
                <select name="year">
                    <option  value="2001">2001</option>
                    <option  value="2002">2002</option>
                    <option  value="2003">2003</option>
                </select>年
                <select name="month">
                    <option  value="7">7</option>
                    <option  value="8">8</option>
                    <option  value="9">9</option>
                </select>月
                <select name="day" >
                    <option  value="16">16</option>
                    <option  value="17">17</option>
                    <option  value="18">18</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td align="right">我正在:</td>
            <td>
                <select name="doing" multiple="multiple" size="1">
                    <option  value="吃饭">吃饭</option>
                    <option  value="睡觉">睡觉</option>
                    <option  value="打豆豆">打豆豆</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img id="verifyImg" src="verycode.gif" width="132px" height="55">
                <span class="span_see" onclick="changeImg()">看不清，换一张</span>
            </td>
        </tr>
        <tr>
            <td align="right">验证码:</td>
            <td><input id="tt" type="text" name="testCode"></td>
        </tr>
        <tr>
            <td></td>
            <td  >
                <img onclick="verify()" id="verifysubmit"  src="btn_reg.gif" height="40" width="186"/>
            </td>
        </tr>
    </table>
</div>

<script>
    var listImg = ["1111.png","1234.png","2222.png","3333.png","4567.png"]
    var listver = [{name:"1111.png",code:1111},
                    {name:"2222.png",code:2222},
                    {name:"3333.png",code:3333},
                    {name:"4567.png",code:4567},
                    {name:"verycode.gif",code:"BnKsU"}]
    function changeImg() {
        var imgNode = document.getElementById("verifyImg")
        if(listImg.length>0){
            var randomindex = Math.floor(Math.random()*listImg.length)
            imgNode.src = listImg[randomindex]
        }else{
            imgNode.src = "verycode.gif"
           listImg =  ["1111.png","1234.png","2222.png","3333.png","4567.png"]
        }
        listImg.splice(randomindex,1)
        // console.log(listImg)
    }
    function verify() {

        var inputNode = document.getElementById("tt")
        var incode = inputNode.value
        console.log(incode)
        var codeimg = document.getElementById("verifyImg")
        for (var i=0;i<listver.length;i++){
            console.log(listver[i].name)
            var codeimgsrc = codeimg.src.split("/")
            var codeimgfin = codeimgsrc[codeimgsrc.length-1]
            if (listver[i].name === codeimgfin ){
                if(incode == listver[i].code){
                    alert("验证正确")
                    return
                }else {
                    alert("验证失败")
                    return
                }
            }
        }
    }

</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .divCon{
            width: 50%;
            height: 300px;
            padding: 1px;
            margin: 20px 25%;
            /*background: yellow  ;*/
        }
        .divHead{
            margin: 5px 15%;
        }
        .divTab{
            margin-top:3px ;
        }
        input{
            height: 27px;
        }
        select{
            height: 26px;
        }
        table{
            height: 100px;
            border: 1px solid;
            margin: 5px 15%;
            width: 65%;
            text-align: center;
        }
        td{
            text-align: center;        }

    </style>
</head>
<body>
<div class="divCon">
    <div class="divHead">
        <select id="changeOne" >
            <option value="人民币">
                人民币
            </option>
            <option value="美元">
                美元
            </option>
            <option value="英镑">
                英镑
            </option>
            <option value="欧元">
                欧元
            </option>
        </select>

        <input type="button" value="互换" onclick="change()">
        <select id="changeOther">
            <option value="人民币">
                人民币
            </option>
            <option value="美元">
                美元
            </option>
            <option value="英镑">
                英镑
            </option>
            <option value="欧元">
                欧元
            </option>
        </select>
        &nbsp;金额: &nbsp;<input style="height: 23px;"type="text" id="count">
        <input  type="button" id="computer" value="按汇率换算" onclick="changeBylv()">
    </div>
    <div class="divTab">
        <table border="1px">
            <tr >
                <td colspan="3" bgcolor="red" align="middle">
                    按当前汇率计算结果
                </td>
            </tr>
            <tr id="tr1"><td id="oneside">
                    美元</td><td id="lv">
                    汇率</td ><td id="otherside">
                    人民币</td></tr>
            <tr id="tr2"><td id="onesidecount">
                    100</td><td id="lvcount">
                    7
                </td><td  id="othersidecount">
                    700
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    var list = ["人民币","美元","英镑","欧元"]
    var listlv = [{name:"人民币",lv:0.146},
                    {name:"英镑",lv:1.33}
                    ,{name:"欧元",lv:1.19}
                    ,{name:"美元",lv:1}]
    function change() {

        // alert(2)
        var oneNode = document.getElementById("changeOne")
        var otherNode = document.getElementById("changeOther")
        console.log(oneNode)
        var temp = oneNode.value
        oneNode.value = otherNode.value
        otherNode.value = temp
        
    }
    function changeBylv() {
        //获得需要改变的数额
        var onenum = document.getElementById("count")
        // console.log(onenum.value)

        var tr1= document.getElementById("tr1")
        var changeOneNode = document.getElementById("changeOne")
        var changeOtherNode = document.getElementById("changeOther")
        // var oldtd1 = document.getElementById()
        var td1 = document.createElement("td")
        var td2 = document.createElement("td")
        var text1 = document.createTextNode(changeOneNode.value)
        var text2 = document.createTextNode(changeOtherNode.value)

        td1.appendChild(text1)
        td2.appendChild(text2)
        var tdlist = tr1.childNodes
        console.log(tdlist[2])

        tr1.replaceChild(td1,tdlist[0])
        tr1.replaceChild(td2,tdlist[2])



        var tr2 = document.getElementById("tr2")
        var td3text = document.createTextNode(onenum.value)
        var td3 = document.createElement("td")
        var tr2list = tr2.childNodes
        td3.appendChild(td3text)
        tr2.replaceChild(td3,tr2list[0])
        var lv1
        var lv2

        for (var i = 0;i<listlv.length;i++){
            if (listlv[i].name == changeOneNode.value){

                lv1 = listlv[i].lv
                // console.log(lv1)
                break
            }
        }
        for (var j = 0;j<listlv.length;j++){
            if (listlv[j].name ==changeOtherNode.value){
                lv2 = listlv[j].lv
                // console.log(lv2)
                break
            }
        }

        var lv3 =lv1*1.0 /lv2
        console.log(lv3)
        var td4text = document.createTextNode(parseInt(onenum.value)*lv3)
        var td4 = document.createElement("td")
        td4.appendChild(td4text)

        tr2.replaceChild(td4,tr2list[2])

        var td5text = document.createTextNode(lv3)
        var td5 = document.createElement("td")
        td5.appendChild(td5text)
        tr2.replaceChild(td5,tr2list[1])



    }
</script>
</body>
</html>