html入门之js

最新推荐文章于 2024-03-30 16:53:19 发布

ljs298443

最新推荐文章于 2024-03-30 16:53:19 发布

阅读量137

点赞数 1

文章标签： css javascript html

本文链接：https://blog.csdn.net/ljs298443/article/details/117713579

版权

一、用js控制li的背景色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <!-- <style>
        .ji{
            background-color: green;
        }
        .ou{
            background-color: red;
        }
    </style> -->
</head>
<body>
    <ul>
        <li>li+1</li>
        <li>li+2</li>
        <li>li+3</li>
        <li>li+4</li>
        <li>li+5</li>
    </ul>
    <script>
        var x = document.getElementsByTagName("li");
        var i;
        for (i= 0;i < x.length;i++) {
            if(i%2==0){
                x[i].innerHTML="li+"+parseInt(i+1);
                x[i].style.backgroundColor="green"
            }else{
                x[i].innerHTML="li+"+parseInt(i+1);
                x[i].style.backgroundColor="red"
            }
            
        }
        // let bj1=document.getElementsByClassName("ji");
        // bj1.style.backgroundColor = "red";
        // bj1[0].innerHTML="xx";
        // let bj2=document.getElementsByClassName("ou");
        // bj2.style.backgroundColor="red";
    </script>
</body>
</html>

效果：

二、用js让一句话中的某个元素样式改变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式</title>
</head>
<body>
    <div id="one">我爱你哈哈爱你</div>
    
</body>
<script>
    var str=document.getElementById("one").innerHTML;
    // document.write(str.innerHTML);
    
    var res =str.replace(/爱/g,"<span style='color:red'>爱</span>");
    // document.write(s);
    // var patt1 = "(.+)(?=.*1.*)";
    document.getElementById("one").innerHTML=res;


    // alert(obj.innerHTML);
    // obj.innerHTML= "google coding"; 
</script>
</html>

效果：

三、用正则表达式设置邮箱、会员登录名、密码、验证码的格式

1.电子邮箱必须为xxx@xx.com格式；

2.会员登录名为11位手机号格式；

3.密码为必须为六位数字；

4.验证码必须慰为五位字母；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里巴巴注册</title>
    <style>
        .box1{
            
            position: relative;
            left: 250px;
        }

        .box2{
            
            position: relative;
            left: 250px;
        }

        .box3{
            position: relative;
            left: 513px;
        }
        
        .box4{
            font-family:Arial, 宋体;
	        margin:10px auto;                     /* 页面居中 */
	        box-sizing:content-box;               /* 尺寸计算方式为content-box */
	        width:450px;                          /* 盒子宽400px */
	        padding:20px;                         /* 内边距20px */
	        background-color:#e4e4e4;             /* 浅灰色背景 */
	        box-shadow:inset 0 0 15px 5px #bbb;   /* 向内的阴影 */
        }

        
        .box4 section {
            background-color:#fff;
            font-size:12px;
            line-height:25px;
            box-sizing:border-box;                /* 尺寸计算方式为border-box */
            width:450px;                          /* 盒子宽400px */
            height:150px;                         /* 盒子高200px */
            padding:10px;                         /* 内边距10px */
            border:1px solid #CCC;
            overflow-x:hidden;                    /* 水平方向不设置滚动条 */
            overflow-y:scroll;                    /* 垂直方向设置滚动条 */
        }

        .box4 footer {
            text-align:center;
            padding-top:5px;
        }

        .box5{
            
            position: relative;
            left: 250px;
        }

        .box6{
            position: relative;
            left: 180px;
        }

        .box7{
            position: relative;
            left: 165px;
        }

        .box8{
            position: relative;
            left: 213px;
        }

        .box9{
            position: relative;
            left: 150px;
        }

        .box10{
            position: relative;
            left: 173px;
        }

        .box11{
            position: relative;
            left: 173px;
        }

        .name{
            margin-top: 10px;
        }

        .app{
            margin-top: 25px;
        }

        .tp{
            height: 30px;
            vertical-align: middle;

        }

        #email{
            position: absolute;
            left: 20px;
        }

        .huan{
            text-decoration: underline;
            color: lightskyblue;
        }



    </style>
</head>
<body>
    <div class="box1">
        <img src="图片3.png">
    </div>
    <div class="box2">
        <!-- <form name="myform" onsubmit="return dosubmit()" method="POST"> -->
            <div class="box6">
                电子邮箱：<input type="email" name="yx" id="yx" onblur="checkemail()" placeholder="邮箱格式为xxx@xx.com">
            </div>
    
            <div class="box7">
                会员登录名：<input type="text" class="name" id="name" onblur="checkname()" placeholder="登录名格式为11为手机号">
            </div>
            
            <div class="box8">
                密码：<input type="password" class="name" id="password" onblur="checkpassword()" placeholder="密码为6为数字">
            </div>
            
            <div class="box9">
                再次输入密码：<input type="password" class="name" id="respassword" onblur="checkrespassword()">
            </div>
    
            <div class="box10 name">
                会员身份：<input type="radio" name="only">卖家 <input type="radio" name="only">买家 <input type="radio" name="only">两者都是
            </div>
    
            <div class="box11 app">
                验证码：<input type="text" id="yzm" onblur="checkyzm()" placeholder="验证码为5为字母"> <img class="tp" src="图片4.png"> <text class="huan">&nbsp;看不清？换一张</text>
            </div>
            <!-- <input type="submit" value="提交"> -->

        <!-- </form> -->
        
       
        
        
        
    </div>
    <div class="box3 app">
        <img src="图片1.png" alt="">
    </div>
    <div class="box4">
        <section>
            欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。

        </section>
        
    </div>
    <div class="box5">
        <img src="图片2.png">
    </div>
</body>
<script>
    function checkemail(){
        var yx=document.getElementById('yx').value;
        // var yx=document.myform.yx.value;
        if(yx.match(/[0-9]{5,8}@[0-9a-zA-z]{2,4}.com/) == null){
            alert("邮箱格式错误");
            return false;
        }
        return true;
    }
    function checkname(){
        var name=document.getElementById('name').value;
        if(name.match(/^1+[0-9]{10}$/)==null){
            alert("登录名格式错误");
            return false;
        }
        return true;
    }

    function checkpassword(){
        var password=document.getElementById('password').value;
        if(password.match(/[0-9]{6}/) == null){
            alert("密码格式错误");
            return false;
        }
        return true;
    }

    function checkrespassword(){
        var password=document.getElementById('password').value;
        var respassword=document.getElementById('respassword').value;
        if(password!=respassword){
            alert("密码不一致");
            return false;
        }
        return true;

    }

    function checkyzm(){
        var yzm=document.getElementById('yzm').value;
        if(yzm.match(/[A-z]{5}/) == null){
            alert("验证码格式错误");
            return false;
        }
        return true;
    }

    function dosubmit(){
        return checkemail() && checkname() && checkpassword() && checkrespassword() && checkyzm();
    }

</script>
</html>

效果：

ljs298443

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html入门之js

一、用js控制li的背景色：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫