Java Script/Html 多种高级页面属性

落日映苍穹つ 2022-07-16 07:53 170阅读 0赞

**完成效果：利用java script完成多种高级页面动画。**

**1.图片轮播和点击换图。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片轮播（JSP）</title>
    </head>
    <script>
        function t1() {
            var img=document.getElementById("img");
            img.src="../image/1.jpg";
        }
        function t2() {
            var img=document.getElementById("img");
            img.src="../image/2.jpg";
        }
        function t3() {
            var img=document.getElementById("img");
            img.src="../image/3.jpg";
        }
    
        var s = ['../image/1.jpg'
            ,'../image/2.jpg'
            ,'../image/3.jpg']
    
        var index = 0;
        function imgGo() {
            setInterval(function () {
                var img =document.getElementById("img");
                img.src = s[index];
                index++;
                if(index>2){
                    index==0;
                }
                show(index);
            },2000)
        }
    </script>
    <body οnlοad="imgGo()">
    <div>
        <img id="img" src="../image/1.jpg" height="200" width="200" />
    </div>
    
    <div id="tab1" οnclick="t1()">
    <table style="border:1px solid red;background-color:
    orange;height: 20px;width: 10px;float: left;position: relative;left: 80px;top: -25px">
    </table>
    </div>
    
    <div id="tab2" οnclick="t2()">
    <table style="border:1px solid red;background-color:
    orange;height: 20px;width: 10px;float: left;position: relative;left: 90px;top: -25px">
    </table>
    </div>
    
    <div id="tab3" οnclick="t3()">
    <table style="border:1px solid red;background-color:
    orange;height: 20px;width: 10px;position: relative;left: 100px;top: -25px">
    </table>
    </div>
    </body>
    </html>

**效果：**

**![Center][]  
2.点击一条信息下面出来多条信息。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function ol1() {
                var obj1=document.getElementById("ol1");
                if(obj1.style.display=="none"){
                    obj1.style.display="block";
                }else if(obj1.style.display=="block"){
                    obj1.style.display="none"
                }
            }
            function show(d2,d3,d4) {
                if(document.getElementById(d2).style.display=='none'){
                    document.getElementById(d2).style.display='block'
                }else {
                    document.getElementById(d2).style.display='none'
                }
            }
        </script>
    </head>
    <body>
    <ul>
        <li  οnclick="ol1()">注册 & 认证
            <ol  id="ol1" style="display: none">
                <li>注册激活</li>
                <li>安全登录</li>
                <li>支付宝认证</li>
            </ol>
        </li>
        <li οnclick="show('2','3','4')">买家帮助
            <ol id="2" style="display: none">
                <li>宝贝搜索、浏览</li>
                <li>了解卖家</li>
                <li>出价及付款</li>
            </ol>
    
        </li>
        <li οnclick="show('2','3','4')">卖家帮助
            <ol id="3" style="display: none">
                <li>店铺设置管理</li>
                <li>商品发布出售＆推荐</li>
                <li>成交后发货＆评价 </li>
                <li>优惠券和红包 </li>
            </ol>
        </li>
        <li οnclick="ol4()">个人资料修改
            <ol id="ol4" style="display: none">
                <li>我的淘宝功能介绍</li>
                <li>修改个人信息</li>
                <li>淘宝/支付宝帐户绑定</li>
            </ol>
        </li>
    </ul>
    </body>
    </html>

**效果：**

**![Center 1][]![Center 2][]  
3.鼠标移动时，右下角有一个div跟着移动，并显示当前位置（类似于QQ截图）**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function getXY() {
                var move=document.getElementById("box");
                move.innerHTML=event.clientX+":"+event.clientY;
                move.style.left=event.clientX+5+"px";
                move.style.top=event.clientY+5+"px";
            }
        </script>
    </head>
    <body οnmοusemοve="getXY()">
    <div id="box" style="border: 1px solid red ;width: 80px;height: 80px;position: absolute;left:5px;top:5px">
    </div>
    </body>
    </html>

**效果：**

**![Center 3][]**

**4.表单的动态增加行、删除所选中行、批量修改所选中行。并且选中第一个单选框会全选。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script>
            function $(name) {
                return document.getElementById(name);
            }
            function addRow() {
                var add=$("table");
                var name=$("name");
                var age=$("age");
                var address=$("address");
    
                var row=add.insertRow(2);
                var idx=add.rows.length-2;
    
                var c1=row.insertCell(0);
                var c2=row.insertCell(1);
                var c3=row.insertCell(2);
                var c4=row.insertCell(3);
                c1.innerHTML="<input type='checkbox' value='"+idx+" 'id='ch"+idx+"'>";
                c2.innerText=name.value;
                c3.innerText=age.value;
                c4.innerText=address.value;
            }
    
            function del() {
                var tab=$("table");
                for (var i= tab.rows.length - 1; i>0;i--) {
                    if(tab.rows[i].cells[0].getElementsByTagName("input")[0].checked){
                        tab.deleteRow(i);
                    }
                }
            }
    
            function change() {
                var tab=$("table");
                var name=$("name");
                var age=$("age");
                var address=$("address");
                for (var i= tab.rows.length - 1; i>0;i--) {
                    if(tab.rows[i].cells[0].getElementsByTagName("input")[0].checked){
                        var c2 = tab.rows[i].cells[1];
                        var c3 = tab.rows[i].cells[2];
                        var c4 = tab.rows[i].cells[3];
                        c2.value="";
                        c3.value="";
                        c4.value="";
                        c2.innerHTML = name.value;
                        c3.innerHTML = age.value;
                        c4.innerHTML = address.options[address.selectedIndex].text;
                    }
                }
            }
    
            function chAll() {
                var ch=$("checkAll");
                var tab=$("table");
                for(var i=1;i<=tab.rows.length-2;i++){
                    var chw=$("ch"+i);
                    if(ch.checked==true){
                        chw.checked=true;
                    }else {
                        chw.checked=false;
                    }
                }
            }
        </script>
    </head>
    <body>
    <form>
        <div style="padding-left: 130px">
        <input type="button" value="新增" οnclick="addRow()">
        <input type="button" value="删除" οnclick="del()">
        <input type="button" value="修改" οnclick="change()">
        </div>
    <table border="1" id="table">
        <tr>
            <td align="center"><input type="checkbox" id="checkAll" οnclick="chAll()"></td>
            <td align="center">姓名</td>
            <td align="center">年龄</td>
            <td align="center">住址</td>
        </tr>
        <tr>
            <td></td>
            <td ><input type="text" width="100px" id="name" align="center" width="100px"></td>
            <td ><input type="text" width="100px" id="age" align="center" width="100px"></td>
            <td >
                <select style="width: 100px;"id="address" align="center" width="100px">
                    <option>--请选择--</option>
                    <option>青岛</option>
                    <option>济南</option>
                    <option>烟台</option>
                </select>
            </td>
        </tr>
    </table>
    </form>
    </body>
    </html>

效果：

**原本表单样式：**

**![Center 4][]**

**增删改后样式：**

**![Center 5][]**

**5.表单各种样式验证。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单验证</title>
        <script>
            function check() {
                var name=document.getElementById("name");
                var pwd=document.getElementById("pwd");
                var pwd1=document.getElementById("pwd1");
                var body=document.getElementById("body");
                var phone=document.getElementById("phone");
                var mobile=document.getElementById("mobile");
                var mail=document.getElementById("mail");
                if((name.value).length<8){
                    alert("用户名长度必须大于8位");
                    name.value="";
                    name.focus();
                    return;
                }
                if(pwd.value.toLocaleString()==pwd.value.toUpperCase()&&pwd.value.length<6){
                    alert("密码长度必须大于6位，密码中必须包含字母和数字");
                    pwd.value="";
                    pwd.focus();
                    return;
                }
                if(pwd.value!=pwd1.value){
                    alert("输入密码不同");
                    pwd1.value="";
                    pwd1.focus();
                    return;
                }
                if((body.value.length!=18&&body.value.lastIndexOf("X"))&&body.value.length!=15){
                    alert("输入身份证错误");
                    body.value="";
                    body.focus();
                    return;
                }
                if(phone.value.length!=13&&phone.value.indexOf("-")!=4){
                    alert("输入固定电话错误");
                    phone.value="";
                    phone.focus();
                    return;
                }
                if(mobile.value.length!=11){
                    alert("输入手机号码错误");
                    mobile.value="";
                    mobile.focus();
                    return;
                }
            }
        </script>
    </head>
    <body>
    <form>
        <table border="1">
            <tr>
                <td align="center" width="100px">登录名:</td>
                <td width="100px"><input type="text" id="name"></td>
                <td width="400px">长度必须大于8位</td>
            </tr>
            <tr>
                <td align="center">登录密码：</td>
                <td width="100px"><input type="text" id="pwd"></td>
                <td width="400px">长度必须大于6位,必须包含数字和字母</td>
            </tr>
            <tr>
                <td align="center">确认密码：</td>
                <td width="100px"><input type="text" id="pwd1"></td>
                <td width="400px">必须与第一次所输入的密码相同</td>
            </tr>
            <tr>
                <td align="center">身份证号码：</td>
                <td width="100px"><input type="text" id="body"></td>
                <td width="400px">必须是15位或者18位最后一个为X</td>
            </tr>
            <tr>
                <td align="center">固定电话：</td>
                <td width="100px"><input type="text" id="phone"></td>
                <td width="400px">格式（xxxx-xxxxxxxx）</td>
            </tr>
            <tr>
                <td align="center">手机号码：</td>
                <td width="100px"><input type="text" id="mobile"></td>
                <td width="400px">长度必须等于11位</td>
            </tr>
            <tr>
                <td align="center">电子邮件：</td>
                <td width="100px"><input type="text" id="mail"></td>
                <td width="400px">xxxxxxxxx@xx.xxx(QQ邮箱样式)</td>
            </tr>
            <tr>
                <td align="center" colspan="3">
                    <input type="button" value="提交" οnclick="check()">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
    </body>
    </html>

**效果：**

**原先表单及要求：**

**![Center 6][]  
输入后效果：**

**![Center 7][]**

[Center]: /images/20220716/d48f25733b604a2cb26637c37bd6ef8c.png
[Center 1]: https://img-blog.csdn.net/20161010212238380?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220716/f8e20b17a75547aba0b86bffcc01c79c.png
[Center 3]: /images/20220716/e649784513bf4993b552f76631cebe90.png
[Center 4]: /images/20220716/f3399bd89bcf4851aec01feb90dc29dc.png
[Center 5]: /images/20220716/85dc4734e15549c8b73fec029935ec60.png
[Center 6]: /images/20220716/0b31c1b202464c4785504daf151542a2.png
[Center 7]: /images/20220716/73f71e50912947b19a133af4332b1d94.png