HTML、 CSS、 JavaScript三者的关系

谜风 2020-10-13 03:42:12

HTML、 CSS、 JavaScript三者的关系





    网页主要由三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）

    HTML —— 结构， 决定网页的结构和内容（ “是什么”）

    CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）

    JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）

修改密码 : html
href="javascript:void(0)" 作用 : 不能点击进程序中

<form>

			<!-- from后面   action="InsertServlet" method="post"-->

			<div class="inputBox">

				<input type="text" name="LoginID" id="LoginID" required="">

				<label>用户名</label>

			</div>

			<div class="inputBox">

				<input type="text" name="Email" id="Email" required=""> <label>邮箱地址</label>

			</div>			

				<div class="inputBox">

				<input type="text" name="Auth" id="Auth" required=""> <label>验证码</label>

				<a href="javascript:void(0)" id="verify" >获取验证码</a>

			</div>

			<div class="inputBox">

				<input type="PassWord" name="PassWord" id="PassWord" required="">

				<label>新密码</label>

			</div>

			<div class="inputBox">

				<input type="PassWord" name="PassWord2" id="PassWord2" required="">

				<label>确认密码</label>

			</div>

			<input type="button" id="registerBtn" value="进行修改">

		</form>

CSS



body {

        #verify{

	    position: absolute;      // 寻找div     控制位置

            top: 6px;

            right: 10px;

            color: #fff;

            text-decoration: none;   //控制  划线

         }

   }



<script>

  $(function(){

		   var getCode = false;

    $("#verify").click(function () {

        var time = 60;

        var $code = $(this);

        var Email = $("#Email").val();

        if (!new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$").test(Email)) {

            alert('电子邮箱格式错误！'); return;

        }

        var url = "/onepiece/verify";

        $.post(url, { Email: Email }, function (d) {

            if (d.code == "1") {

                var t = setInterval(function () {

                    getCode = true;

                    if (time == 0) {

                        clearInterval(t);

                        $code.html("重新获取");

                        getCode = false;

                        return;

                    }

                    $code.html(time + "秒");

                    time--;

                }, 1000);

            }

            else {

                alert(d.msg);

                return;

            }

        }, "json");

    });

</script>