有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>

        /**生成验证码*/
        var ran;

        function YZM() {

            //生成随机四位整数
            ran = Math.floor(Math.random() * 9000 + 1000);

            //获取span对象
            var span = document.getElementById("yzm_span");
            span.innerText = ran;
        }

        /**校验用户名方法*/
        function checkName() {

            //汉字的正则表达式
            var reg = /^[\u4e00-\u9fa5]{3,6}$/;
            return check("uname", reg);
        }

        /**校验密码方法*/
        function checkPwd() {
            //密码的正则表达式
            var reg = /^\d{3,6}$/;
            return check("pwd",reg);
        }

        /**校验邮箱方法*/
        function checkEmail() {
            //邮箱的正则表达式
            var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            return check("email",reg)
        }

        /**校验手机号方法*/
        function checkPhone() {
            var reg = /^\d{11}$/;
            return check("phone",reg)
        }

        /**提取公共部分*/
        function check(id, reg) {
            //获取对象
            var ob = document.getElementById(id);

            //获取value值
            var val = ob.value;

            //获取alt值
            var alt = ob.alt;

            //获取span对象
            var span = document.getElementById(id + "_span");

            if (val == null || val == "") {
                span.innerText = "×" + alt + "不能为空";
                span.style.color = "red";
                return false;
            } else if (reg.test(val)) {
                span.innerText = "√" + alt + "合法";
                span.style.color = "green";
                return true;
            } else {
                span.innerText = "不合法";
                span.style.color = "red";
                return false;
            }
        }

        /**校验性别*/
        function checkSex() {
            //获取所有性别对象
            var sex = document.getElementsByName("sex");

            //获取span对象
            var span = document.getElementById("sex_span");

            for (var i in sex) {
                if (sex[i].checked){

                    span.innerText="性别选择成功";
                    span.style.color="green";

                    return true;
                }
            }

            span.innerText="请选择性别";
            span.style.color="red";
            return false;
        }

        /**校验籍贯*/
        function checkAddress() {
            var sel = document.getElementById("sel").value;
            var span = document.getElementById("sel_span");

            if (sel==0) {
                span.innerText="请选择籍贯";
                span.style.color="red";
                return false;
            } else {
                span.innerText="籍贯选择成功";
                span.style.color="green";
                return true;
            }
        }

        /**校验验证码*/
        function checkYZM() {
            //获取输入的验证码
            var yzm = document.getElementById("yzm").value;

            //获取span标签
            var span = document.getElementById("yzm2_span");

            if (yzm==ran) {
                span.innerText="验证码正确";
                span.style.color="green";
                return true;
            } else {
                span.innerText="验证码不正确";
                span.style.color="red";
                return false;
            }
        }

        /**是否同意协议*/
        function checkAgree() {
            //同意框
            var check = document.getElementById("check");

            //提交
            var sub = document.getElementById("sub");

            sub.disabled=!check.checked;
        }

        /**总体判断*/
        function zong() {
            var flag=checkName()&&checkPwd()&&checkEmail()&&checkPhone()&&checkYZM()&&checkAgree()&&checkAddress()&&checkSex();
            return flag;
        }


        /*
          * 正则表达式：
          *
          * 正则表达式是对于数据格式进行一定的规范限制
          *
          *
          * ^：开始
          * [0-9]  [a-z A-Z] :数字  字母
          *
          * {2,4} ：段域 至少是2位  最多是4位
          * {3}:指定范围就是3位
          * {2,}:至少是2位
          *  $:结束
          *
          * \d：[0-9]
          *
          * \w[0-9 a-z A-Z]
          *
          * */

    </script>
</head>
<body>
<center>
    <h3>注册页面</h3>
    <hr/>
    <form action="" method="get" onsubmit="return zong()">
        <table>
            <tr height="35px">
                <td width="150px">用户名：</td>
                <td width="500px">
                    <input type="text" name="uname" id="uname" alt="用户名" onblur="checkName()"/>
                    <span id="uname_span">用户名必须是3-5个汉字</span>
                </td>
            </tr>
            <tr height="35px">
                <td>密码：</td>
                <td>
                    <input type="password" name="pwd" id="pwd" alt="密码" onblur="checkPwd()">
                    <span id="pwd_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>手机号：</td>
                <td>
                    <input type="text" name="phone" id="phone" alt="手机号" onblur="checkPhone()"/>
                    <span id="phone_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>邮箱：</td>
                <td>
                    <input type="text" name="email" id="email" alt="邮箱" onblur="checkEmail()"/>
                    <span id="email_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>性别：</td>
                <td>
                    男：<input type="radio" name="sex" value="1" onclick="checkSex()"/>
                    女：<input type="radio" name="sex" value="0" onclick="checkSex()">

                    <span id="sex_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>爱好；</td>
                <td>
                    <input type="checkbox" name="fav" value="1"/>唱歌
                    <input type="checkbox" name="fav" value="2"/>睡觉
                    <input type="checkbox" name="fav" value="3"/>LOL<br/>
                    <input type="checkbox" name="fav" value="4"/>旅游
                    <input type="checkbox" name="fav" value="5"/>看电影
                    <input type="checkbox" name="fav" value="6"/>听音乐
                </td>
            </tr>
            <tr height="35px">
                <td>籍贯：</td>
                <td>
                    <select name="address" id="sel" onchange="checkAddress()">
                        <option value="0">--请选择--</option>
                        <option value="1">河南</option>
                        <option value="2">湖南</option>
                        <option value="3">海南</option>
                        <option value="4">云南</option>

                    </select>

                    <span id="sel_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>验证码：</td>
                <td>
                    <input type="number" id="yzm" onblur="checkYZM()"/>
                    <input type="button" id="hq" value="点击获取验证码" onclick="YZM()"/>
                    <span id="yzm_span"></span>
                    <span id="yzm2_span"></span>
                </td>
            </tr>
            <tr height="35px">
                <td>个人介绍：</td>
                <td>
                    <textarea name="intro" rows="8" cols="30"></textarea>
                </td>
            </tr>
            <tr height="35px">
                <td colspan="2" align="center">
                    <input type="checkbox" id="check" onclick="checkAgree()">是否同意协议
                </td>
            </tr>
            <tr height="35px">
                <td colspan="2" align="center">
                    <input type="submit" id="sub" value="注册" disabled="true">
                </td>
            </tr>
        </table>
    </form>
</center>
</body>
</html>

籍贯这里不选择的话也能提交有没有什么方法在提交的时候能提醒选择籍贯或者报错

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 166楼

老师，我这样代码删除操作能正常执行，但是为什么我在remove()方法后面加上 ; 就报错，说我这个；号有问题？

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 167楼

<!DOCTYPE html>

<html>

<head>

<style>

.cen{

width: 200px;

heig: 200px

background-color:#d5093c;

/*阴影水平方向的偏移垂直方向的偏移模糊度阴影颜色*/

box-shadow:0px 0px 70px #D5093C;

}

.lef{

/*倒圆角指令*/

border-radius: 100px;

/*左上右下走上左下*/

/*border-radiu:10px 60px;*/

/*border-radiu:10px 20px 30px 40px;*/

position: absolute;

top: 200px;

left: 200px;

}

.rig{

border-radius: 100px;

position: absolute;

top: 200px;

left: 341px;

}

.c{

/*旋转角度*/

transform: rotate(45deg);

position: absolute;

top: 269px;

left: 271px;

}

div.hover{

/*放大的倍数*/

transform: scale(1.3);

/*x:水平位移 y:垂直方向负数：上*/

/*transform: translate(0px,-5px);*/

/*2D角度旋转 X Y*/

/*transform: skew(40deg 45deg);*/

}

</style>

</head>

<body>

</body>

</html>

老师为什么我的代码这个在浏览器中打开后没有显示

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 168楼

老师，请问为什么开发的时候不直接添加class属性，然后写css样式？这样不更简单吗？为什么要写css样式，再用jquery去操作？这样不是多了步骤？还是说这样去操作效率更高？

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 169楼

老师我能不能这么理解，demo5中把a传递过去的时候是把整个function函数形式和内容都传过去打印，然后demo5打印a的时候就是打印整个，如果是打印a（）的时候就是打印a的方法

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 170楼

老师你好，我分区后界面没显示分区线

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 171楼

老师这些文本标签都要放到表单标签里面吗

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 172楼

老师为啥我跳转失败了呀，Hbuilder还有NotePad++都跳转不了都是空白页

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 173楼

老师，定义div类名后面为什么都要加一个warp

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 174楼

点哪个下载

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 175楼

使用老师的源码运行，并没有动画效果，怎么回事呀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				
				height: 300px;
				
				background-color: green;
				
			}
			
			#div2{
				
				height: 300px;
				
				background-color: yellow;
				
				
				
			}
		</style>
		
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			  $(function(){
			  	  $("#bu1").click(function(){
			  	  	
			  	  	  //获得div对象
			  	  	  var  div1 =$("#div1");
			  	  	  
			  	  	  //3s隐藏动画
//			  	  	  div1.hide(3000);
			  	  	  
//			  	  	  div1.show(3000);
                      //隐藏的显示 ---显示的隐藏
                      //$("div").toggle(3000);
                     //滑动上
//                   div1.slideUp(3000);
                     //滑动下
//                   div1.slideDown(3000);
                     //滑动上--滑动下    滑动下---滑动上
//                   $("div").slideToggle(3000);
                   
                     //淡出
                     div1.fadeOut(3000);
                     //淡入
                     div1.fadeIn(3000);
			  	  	
			  	  })
			  	  
			  	  
			  	
			  	
			  	
			  })
			
			
			
		</script>
		
	</head>
	<body>
		
		<input type="button" id="bu1" value='动画触发'>
		
		<hr />
		
		<div id="div1"></div>
		
		<div id="div2"></div>
		
		
	</body>
</html>

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 176楼

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			$(function)(){
				//js获得元素对象
				var zh=document.getElementById("zh");
				alert(zh);
				//获得element;
				var zhh=$(zh);  //js转jq
				
				//jq获得元素对象：
				var zh1=$("#zh");
				//object对象下的是数组的形式反馈回来，所以要以数组的形式去调用；
				alert(zh1[0]); //jq-js
				
				//ID选择器获得：
				var zh1=$("#zh");
				
				//元素选择器：
				var inp=$("input");
				
				//类选择器：
				var inp2=$(".inp");
				alert(inp2[0].value);
				//jq获得内容操作
				alert(inp2.eq(0).val());
				//inp2的元素 元素的值，利用eq 和val获得；
				
				//通用选择器
				$("*").css("background-color","greenyellow");
				 //通用选择器，调用他的方法css样式，选择元素：背景元素，黄绿色；
				
			})
		</script>
	</head>

	<body>
		<p>
			账号：<input type="text" name="" id="zh" value="123"/>
		</p>
		<p> 
		    密码：<input type="password" name="" id="pwd" value="12366" class="inp"  />
		
		</p>
	</body>
</html>

为什么我的浏览器执行的时候没反应啊老师

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 177楼

老师为甚我运行后不出效果啊，文件导入有错误还是。。。。

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 178楼

老师我想问一下：function函数的参数id是对应body里面的那个id吧

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 179楼

老师，在书写这种单标签的时候，不加反斜线和加上反斜线的效果是一样的，那我们在真正写网页的时候还需不需要加上这个反斜线呢？

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 180楼

同学您好