深入了解CSS和JS对于html的编辑

一 什么是CSS和JS
html是静态网页,紧靠html是不能对网页进一步美化的,
而CSS:层叠样式表,通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式(如:修改颜色、字体、字号、宽高、位置、背景等)
js(javascript):是脚本语言,为浏览器的一部分,广泛用于客户端的脚本语言,现在也用户服务端,常用来为网页添加各式各样的动态功能(如:轮播图、tab切换等),为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
二 CSS、div和span的联系理解

  1. 两者的区别与特性;
    1).块级元素独占一行空间, 行内元素只占据自身宽度的空间;
    2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
    3). 块级元素可以设置宽和高, 行内元素设置的宽和高失效
  2. 行内标签和 块级元素分别有哪些?
    行内标签:span, strong, a, img, input, textarea
    块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
  3. 如何让块级元素居中? 如何让行内元素居中?
    1).块级元素居中: margin: 0 auto
    2).行内元素居中: text-aligin:center
  4. 简单示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--span 长宽的改变并不能生效-->
<span style="width: 100px;height: 100px;border: 1px solid red">helllo</span>
<span style="width: 100px;height: 100px;border: 1px solid blue">world</span>
<!--可以-->
<div style="width: 100px;height: 100px;border-radius: 25px;border: 1px solid blueviolet;
    box-shadow: 4px 4px 4px #aaffaa;text-align: center;margin: 0px auto">hello</div>
<div style="width: 100px;height: 100px;border-radius: 25px;border: 1px solid black;
    box-shadow: 4px 4px 4px #aaffaa;text-align: center">world</div>
</body>
</html>

执行的结果:
在这里插入图片描述

< span >标签是一个行内元素,且只会占据本身的字符长度
三 编写CSS样式

  1. 类选择器
    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
    选择器通常是您需要改变样式的 HTML 元素。
    每条声明由一个属性和一个值组成。
    属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开
selector {property: value}

写在< head>中,对< body>中的元素进行说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-radius: 25px;
            border: 1px solid blueviolet;
            box-shadow: 4px 4px 4px #aaffaa;
            text-align: center;
            margin: 0 auto
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

执行的结果:
在这里插入图片描述

  1. id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        #westos{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>


<div>1</div>
<div id="westos">2</div>
<div>3</div>

</body>
</html>

执行的结果:
在这里插入图片描述
3. 层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ul li a {
           color: red;
       }
       input[type='submit']{
           background: palevioletred;
            width: 200px;

       }

    </style>

</head>
<body>

<ol>
    <li><a href="#" > 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ol>



<ul>
    <li><a href="#"> 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ul>



<form>
    姓名: <input type="text"><br/>
    密码: <input type="password"><br/>
    <input type="submit" value="注册">
</form>



</body>
</html>

执行的结果:
在这里插入图片描述
四 导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style-type: none
        }
        li{
            font-size: large;
            display:inline-block;
            width: 20%;
            background:darkgray;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center
        }
        li:hover{
            background: black;
            color: snow;
        }
    </style>

</head>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>Python</li>
</ul>
</body>
</html>

执行的结果:
在这里插入图片描述
五 分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
    </style>
</head>
<body>
<h2>圆角边框</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>
</body>
</html>

执行的结果:
在这里插入图片描述
六 CSS的引入方式
引入方式:

    1). 行内引入: <a style="行内引入的样式">
    2). 内部引入: 写在head标签里面的style标签里面的样式
    3).外部引入:将css样式独立成一个文件,通过< link rel="stylesheet" href="css/main.css">与当前html文件链接在一起

三种引入方式的优先级: 就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<div>
    <ul>
        <li style="background: seashell">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

执行的结果:
在这里插入图片描述
七 唯品会简单的登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header {
            width: 100%;
            height: 100px;
        }

        .header-logo {
            width: 125px;
            height: 80px;
            text-align: center;
            padding-top: 20px;
            margin-left: 20%;
        }
        .header-font{
            background-image: url("//member-ssl.vipstatic.com/img/passport/sprites-hash-701a8168.png?be78a218");
            width: 296px;
            height: 100px;
            position: absolute;
            top: 1px;
            right: 130px;
        }
        .header-logo a {
            font-size: xx-large;
            color: #f10180;
            text-decoration: none;
        }

        .body {
            background-image: url("https://img.vipstatic.com/upload/flow/2018/10/08/42/15389937084016.jpg");
            width: 1353px;
            height: 650px;
            background-position: center top;
            background-repeat: no-repeat

        }

        #login {
            width: 360px;
            height: 360px;
            float: right;
            margin-right: 120px;
            margin-top: 60px;
            background: white;

        }

        #login h3 {
            text-align: center;
        }

        #login h3:hover {
            color: #f10180;;
        }

        hr {
            color: lightgray;
        }

        .a {
            width: 80%;
            padding-top: 10px;
            padding-left: 3px;
            margin-top: 20px;
            margin-left: 30px

        }
        .b{
            margin-top:20px;
            font: 12px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,微软雅黑,宋体,sans-serif;
            color: #333
        }
        .c{
            margin-top: 30px;
            text-align: center;
        }
        .c .c-1{
            width: 70%;
            height: 40px;

            background: deeppink;
        }
        .c .c-2{
            color: white;
        }
    </style>
</head>
<body>


<div class="header">
    <div class="header-logo">
        <a href="#">唯品会</a>
    </div>
    <div class="header-font"></div>
</div>


<div class="body">

    <div id="login">
        <h3>账户登陆</h3>
        <hr/>
        <form action="#" method="get">
            <input class="a" type="text" placeholder="用户名/邮箱/电话"><br/>

            <input class="a" type="password" placeholder="密码"><br/>
            <div class="b">
                <input type="radio" name="choice" value="1"><span>记住用户名</span>
                <a href="#" style="color: black;padding-left: 170px">忘记密码</a><br>
            </div>
            <div class="c">
                <!--<input type="submit" value="登陆">-->
                <button class="c-1">
                    <span class="c-2">登陆</span>
                </button>

            </div>

        </form>


    </div>


</div>


</body>
</html>

执行的结果:
在这里插入图片描述
八 JS
如果你想了解JS的更多有趣的事情,可以去w3c上面去看

  1. JS表单注册雏形
    需求:
    1). 用户在注册的时候会输入一些信息, 但是用户输入的内容有可能不合法, 会导致服务器端压力过大;
    2). 当用户填写信息之后, 对填写的信息进行校验,不光是前台需要校验,后台校验: 也是需要校验的
    这是就需要用到JS,来对前后台的数据进行交流
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>
        window.onload = function () {
            // 1. 获取用户输入的用户名的标签对象;
            var uEle = document.getElementById('username');
            alert(uEle);    //用来弹出指示框
            // 2. 获取这个对象里面的值;
            var uValue = uEle.value;
            alert(uValue);
        }
    </script>
</head>
<body>
<form action="#" method="get">
    <!--get: 填写的信息会在url里面显示, 对于重要的数据来说是不安全的;
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码"><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

执行的结果:
在这里插入图片描述

  1. 上面的只是一个雏形,并没有对注册信息提出任何要求
    现在的需求如下 现在的需求如下 :
    1)判断用户名是否为空?
    2)校验密码是否大于6位, 如果不满足则不合法 ?
    实现步骤:
    1). 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2). 对这个事件绑定一个函数(执行的操作写在函数里面);
    3).函数的核心功能: 校验用户名是否为空?
    1.获取输入用户名标签提交的内容;
    2. if判断用户名是否为空?
    3. 如果数据合法, 继续执行, 提交表单;
    4. 如果数据不合法, 不让表单提交? (显示弹出框报错) — alert
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>


//  *****************************1. 校验用户名是否为空? ***************************
        // 定义一个函数
        function checkForm() {
//        1). 获取输入用户名标签提交的内容;
            var user = document.getElementById('username').value;
//        2). if判断用户名是否为空?
//        3). 如果数据合法, 继续执行, 提交表单;
//        4). 如果数据不合法, 不让表单提交? (显示弹出框报错) --- alert
            if (user === '') {
                alert("用户名不能为空!");
                return false;
            }
// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
            var passwdlen = document.getElementById('passwd').value.length;
            if (passwdlen < 6){
                alert("密码不合法: 长度小于6!");
                return false;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

执行的结果:
在这里插入图片描述

  1. JS如何来实现轮播图
    实现图片的自动转换功能
    实现步骤:
    1)确定事件类型为onclick事件;
    2)并跟对应的函数changeImg绑定在一起;
    3)实现函数功能;
    1. 当点击下一页按钮之后, 修改img标签里面的src属性内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script>
        // 1. 定义一个变量, 控制图片的循环顺序;
        var i = 1;
        function  changeImg() {
            // 2. 当点击下一页时, i+1, 这个时候, 图片变成img2;
            i += 1;
            // 3.  修改img标签里面的src属性内容;
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 4. 如果图片轮播结束, 从头开始轮播;
            if (i === 6){
                i = 0;
            }
        }
    </script>
</head>
<body>
<div id="sowing_map"><img src="img/img7_ad.jpg" height="80" width="1190"/>
    <img src="img/img1.jpg" id="img">
    <input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>
  1. 外部引入JS代码和CSS样式实现轮播图
    同时实现网页定时弹出广告,并定时取消弹出的广告:
    1.在页面设置一个隐藏的图片,style=“display:none”
    2.确定事件类型为onload,为其绑定一个函数
    3.设置执行的函数
    4.编写定时任务里面的函数img_Ad()
    获取标签的样式display==‘block’
    清除显示的广告的定时任务
    隐藏广告的定时任务
    5.实现定时任务里面的函数hiddenAd()
    获取标签的样式display==‘block’
    清除显示的广告的定时任务

主代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Js的引入方式:-->
        <!-- - 内部引入: 直接在head标签里面的<script>写的内容;-->
        <!-- - 外部引入:<script src="js/main.js" ></script-->
    <link href="CSS/main.css" rel="stylesheet">
    <script src="JS/main.js"></script>
</head>
<body>
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>
<div>
    <img src="img/img7_ad.jpg" id="img_ad" style="display:none">
</div>
</body>
</html>

CSS里面的代码:

#sowing_map{
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }
#img_ad{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}

JS里面的代码:

window.onload=function () {
            //每隔1s自动执行某函数
            setInterval('changeImg()',1000);
            //每隔1s执行
            setInterval('img_Ad()',1000);
            adtime=clearInterval(img_Ad(),1000)
        };
        //定义一个变量,控制函数的循环顺序
        var i=1;
        function changeImg() {
            //当点击下一页的时候,i+1,这时,图片变为img2
            i += 1;
            //修改img标签里面src的属性内容
            document.getElementById("img").src = "img/img" + i + ".jpg";
            //如果图片轮播结束,从头开始重来
            if (i === 6) {
                i = 0;
            }
        }
        //编写显示隐藏图片的函数
        function img_Ad() {
            //获取到广告图片对应的标签对象
            var ad=document.getElementById('img_ad');
            //修改广告里面的style的属性display
            ad.style.display='block';
            //设置隐藏广告图片的定时任务
            hiddentime=setInterval('hiddenAd()',1000)
        }
        function hiddenAd() {
            var ad=document.getElementById('img_ad');
            ad.style.display='none';
            clearInterval(hiddentime)
        }

这样一来,就可以减轻主代码的荣杂程度,使得代码更加的清晰

  1. JS用户注册界面的优化
    填写用户名和密码时,旁边需有提示;
    用户名或者密码注册时,离开当前填写框时,立即作出判断,填写内容是否符合要求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  showUserTip() {
            // 1. 获取标签对象;
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
        }
        function showPwdTip() {
       // 1. 获取标签对象;
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
        }
        function  checkUser() {
            //1. 离焦时判断用户名是否为空?
            var name = document.getElementById('user').value;
            // 2. 如果为空, 右边来一个红色的提示;
            // 3. 如果不为空, 则取消所有提示;
            if (name === ''){
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>'
                return false;
            }else{
                document.getElementById('userTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;
            }
        }
        function  checkPwd() {
//            alert('离焦');
             //1. 离焦时判断用户名是否为空?
            var pwdLen = document.getElementById('pwd').value.length;
            // 2. 如果为空, 右边来一个红色的提示;
            // 3. 如果不为空, 则取消所有提示;
            if (pwdLen < 6){
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码必须大于等于6位</b>'
                return false;
            }else{
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;
            }
        }
    </script>
</head>
<body>
<!--
    1). 确定事件类型(onfocus-聚焦事件), 并为其绑定一个函数;
    2). 确定事件类型(onblur-离焦事件), 并为其绑定一个函数;
-->
<form action="#" method="get">
    <input type="text" id='user' placeholder="输入用户名" name="username" onfocus="showUserTip()"
           onblur="checkUser()">
    <span id="userTip"></span><br/>
    <input type="password" id="pwd" placeholder="密码" name="passwd" onfocus="showPwdTip()"
           onblur="checkPwd()">
    <span id="pwdTip"></span><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

执行的结果:
在这里插入图片描述

  1. JS实现表单选项的全选与全不选
    步骤分析:
    1). 确定事件类型:鼠标单击单选按钮时(onclick事件), 绑定一个函数;
    2). 编写函数checkAll()
    在这里插入图片描述
    当选中编号前面的方框时,不管下面的选没选,都会被自动选择;
    同理当取消选中编号前面的方框时,下面选则的,都会被自动取消
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  checkAll() {
            //1. 获取全选框对象
            var checkAllEle = document.getElementById('checkAll');
//            alert(checkAllEle);
//            //判断该单选框是否被选中,
//            alert(checkAllEle.checked);
            // 2. 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中, 则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中, 则设置所有的单选框为没有选中状态;
            if (checkAllEle.checked){
                    //- 如果状态为选中, 则设置所有的单选框为选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框, 设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = true;
                    }
            }else{
                    //- 如果状态为未选中, 则设置所有的单选框为未选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框, 设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = false;
                    }
            }
        }
    </script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>
        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>one</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne" ></td>
        <td>two</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>three</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>four</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>five</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>
</body>
</html>
  1. JS校验唯品会登陆信息
    前面通过HTML编写了个简单的唯品会的登陆界面,现在加入JS处理,验证注册信息的合法性前面通过HTML编写了个简单的唯品会的登陆界面,现在加入JS处理,验证注册信息的合法性

主代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="CSS/main.css" rel="stylesheet">
    <script src="JS/main.js"></script>
</head>
<body>


<div class="header">
    <div class="header-logo">
        <a href="#">唯品会</a>
    </div>
    <div class="header-font"></div>
</div>


<div class="body">

    <div id="login">
        <h3>账户登陆</h3>
        <hr/>
        <form action="#" method="get">
            <input class="a" type="text" placeholder="用户名/邮箱/电话" id="name" onblur="out_name()"><br/>
            <span id="nametip"></span><br>
            <input class="a" type="password" placeholder="密码" id="passwd" onblur="out_passwd()"><br/>
            <span id="passwdtip"></span><br>
            <div class="b">
                <input type="radio" name="choice" value="1"><span>记住用户名</span>
                <a href="#" style="color: black;padding-left: 170px">忘记密码</a><br>
            </div>
            <div class="c">
                <!--<input type="submit" value="登陆">-->
                <button class="c-1">
                    <span class="c-2">登陆</span>
                </button>

            </div>

        </form>


    </div>


</div>


</body>
</html>

CSS样式:

.header {
    width: 100%;
    height: 100px;
}

.header-logo {
    width: 125px;
    height: 80px;
    text-align: center;
    padding-top: 20px;
    margin-left: 20%;
}
.header-font{
    background-image: url("//member-ssl.vipstatic.com/img/passport/sprites-hash-701a8168.png?be78a218");
    width: 296px;
    height: 100px;
    position: absolute;
    top: 1px;
    right: 130px;
}
.header-logo a {
    font-size: xx-large;
    color: #f10180;
    text-decoration: none;
}

.body {
    background-image: url("https://img.vipstatic.com/upload/flow/2018/10/08/42/15389937084016.jpg");
    width: 1353px;
    height: 650px;
    background-position: center top;
    background-repeat: no-repeat

}

#login {
    width: 360px;
    height: 360px;
    float: right;
    margin-right: 120px;
    margin-top: 60px;
    background: white;

}

#login h3 {
    text-align: center;
}

#login h3:hover {
    color: #f10180;;
}

hr {
    color: lightgray;
}

.a {
    width: 80%;
    padding-top: 10px;
    padding-left: 3px;
    margin-top: 20px;
    margin-left: 30px

}
.b{
    margin-top:20px;
    font: 12px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,微软雅黑,宋体,sans-serif;
    color: #333
}
.c{
    margin-top: 30px;
    text-align: center;
}
.c .c-1{
    width: 70%;
    height: 40px;

    background: deeppink;
}
.c .c-2{
    color: white;
}

JS校验代码:

function  out_name() {
    var name = document.getElementById('name').value;
    if (name === ''){
        document.getElementById('nametip').innerHTML = '<b style="color:red;font-size: small" >用户名不能为空</b>';
        return false;
    }else{
        document.getElementById('nametip').innerHTML = '<b style="color:greenyellow"> ok </b>';
        return true;
    }
}
function  out_passwd() {
    var pwdLen = document.getElementById('passwd').value.length;
    if (pwdLen < 6) {
        document.getElementById('psswdtip').innerHTML = '<b style="color:red;font-size: small">密码必须大于等于6位</b>';
        return false;
    } else {
        document.getElementById('passwdtip').innerHTML = '<b style="color:  greenyellow"> ok </b>';
        return true;
    }
}

执行的结果:
在这里插入图片描述

  1. JS实现动态添加城市
    实现步骤:
    1. 确定事件类型onclick
    2. 对于事件绑定一个函数addLiElement()
      1).获取到用户在input输入框中填写的信息;
      city = document.getElementById(“city”).value
      2). 创建一个城市的文本节点;document.createTextNode(‘xxxx’)
      3). 创建一个li的元素节点; document.createElement(‘xxxx’)
      4). 将文本节点添加到li元素节点里面去;
      5). 将整体添加到ul标签里面去;
      使用appendChild()来添加子节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity() {
            var city=document.getElementById('city').value;
            var textNode=document.createTextNode(city);
            var liEleNode=document.createElement('li');
            liEleNode.appendChild(textNode);
            var ulEleNode=document.getElementById('ul_city');
            ulEleNode.appendChild(liEleNode);
        }
    </script>
</head>
<body>
    <input type="text" placeholder="请输入城市" id="city">
    <input type="submit" value="添加城市" id="citybtn" onclick="addCity()">
<ul id="ul_city">
    <li>北京</li>
    <li>上海</li>
    <li>西安</li>
</ul>
</body>
</html>

执行的结果:
在这里插入图片描述
添加之后:
在这里插入图片描述

  1. JS实现省市的二级联动
    步骤实现:
    1). 确定事件类型onchange, 并为其绑定一个函数;
    2). 修改下拉列表内容;
    2-1). 获取用户选择的省份;
    2-2). 创建一个二维数组, 用来存储省份和城市的对应关系;
    2-3). 遍历二维数组中的省份;
    2-4). 遍历时省份编号和用户选择的省份编号进行比较,
    2-5). 如果相同, 遍历该省份下的所有城市;
    将每一个城市以城市名添加到select里面去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changecity() {
            var choiceProvince=document.getElementById('province').value;
            var cites=new Array(3);
            cites[0]=new Array('青岛','烟台','济南');
            cites[1]=new Array('成都','绵阳','广元');
            cites[2]=new Array('西安','咸阳','宝鸡');
            var selectEleNode=document.getElementById('city');
            selectEleNode.options.length=0;
            for(var i=0;i<cites.length;i++){
                if (choiceProvince==i){
                    for(var j=0;j<cites[i].length;j++){
                        var textNode=document.createTextNode(cites[i][j]);
                        var optionEleNode=document.createElement('option');
                        optionEleNode.appendChild(textNode);
                        selectEleNode.appendChild(optionEleNode);
                    }

                }

            }

        }
    </script>
</head>
<body>
<form>
    <div style="text-align: center">
        <span>籍贯:</span>
        <select onchange="changecity()" id="province">
            <option>请选择省份</option>
            <option value="0">山东</option>
            <option value="1">四川</option>
            <option value="2">陕西</option>
        </select>
        <select id="city">
            <option>请选择城市</option>
        </select>
    </div>
</form>
</body>
</html>

执行的结果:
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值