js制作验证表单、简易聊天框

登录表单制作： 

放代码：

<div class="wrapper">
    <form action="#" method="GET">
		<h2>登录休闲网</h2>
		<div class="first">
			<label for="" >Email:</label>
			<input type="text" name="email">
		</div>
		<div class="second">
			<label for="">密码:</label>
			<input type="text" name="pwd">
		</div>
		<input type="submit" >
	</form>
</div>
<script>
	// 1.邮箱输入不能为空，必须含有@和.
	// 2.密码长度至少6位，不超过16位。
	var _form=document.querySelector("form");
	var _email=document.querySelector("input[name=email]");
	var _pwd=document.querySelector("input[name=pwd]");
	 _form.onclick=function(){
		var flag=true;
		if(flag){
			return true;
		}
		return false;
	}
	//失去焦点;
	_email.onblur=function(){
		// 1、获取表单内容
		var email=_email.value;
		// 2、判断是否为空
		if(email==""){
			flag=false;
			alert("邮箱不能为空");
			return;
		}
		// 3、验证格式是否正确，
		// 4、不正确时flag=false；添加提示内容；
		if(!email.includes("@")){
			flag=false;
			alert("必须包含@");
			return;
		}
		if(!email.includes(".")){
			flag=false;
			alert("必须包含.");
			return;
		}
	}
	_pwd.onblur=function(){
		// 1、获取表单内容
		var pwd=_pwd.value;
		// 2、判断是否为空
		// 3、验证格式是否正确，
		// 4、不正确时flag=false；添加提示内容；
		if(pwd.length<6 ||pwd.length>16){
			flag=false;
			alert("密码长度为6~16！请正确输入");
		}
	}
</script>

需要注意的是： 

_email=document.querySelector("input[name=email]");这个是js中的选择器，可以不用为起名二烦恼啦；_form.οnclick=function(){}这是个点击函数，和标签中引用点击函数一样，_email.οnblur=function(){}。这个是失去焦点时执行的命令。

 制作一个简易的聊天框：

 看代码：

        <div id="first"></div>
		<input type="text">
		<button>send</button>
		<script>
			var _input=document.querySelector("input");
			var _first=document.getElementById("first");
			// var _img=document.querySelector("img");
			// var _imgs=document.querySelector("#first>.imgs");
			var _button=document.querySelector("button");
			// var _span=document.querySelector("span");
			var i=0;
			_button.onclick=function(){
				// _first.innerHTML="";
				var val=_input.value;
				var imgs = ["./img/picsa (5).png", "./img/picsa (6).png", "./img/picsa (6).png", "./img/picsa (8).png"]
				var names = ["张三", "李四", "王五"];
				var index = Math.floor(Math.random() * 4);
				var index1 = Math.floor(Math.random() * 3);
				a=imgs[index];
				b=names[index1];
				// var i=0;
				if(i%2==0){
					_first.innerHTML+=`<div><img src="${a}" style="width:30px;height:30px;vertical-align:middle">${b}:${val}</div>`;
					_input.value="";
				}else{
					_first.innerHTML+=`<div style="text-align:right">${val}:${b}<img src="${a}" style="width:30px;height:30px;vertical-align:middle"></div>`;
                    _input.value="";
				}
				i++;
			}
        </script>

名字和头像都是随机生成的，利用数学模型Math.random(）实现随机，需要注意的是，图片的随机，里面放的是图片的地址，而名字就是随机的数组下标，

难点：利用判断奇偶 if(%2==0) 的方法实现聊天左右弹。