2020-02-07

JS控制下拉列表左右选择

一、下拉列表元素左右移动

分析：首先是要做出来一个4*2的表格table，然后第一行第二行放type=text的标签，第四行则是一个type=sumbit的提交按钮。主要是第三行的第二列需要做出来两个div标签的表格(需要通过`div style="float:left;"`浮动让两个div在一行内 )，最后使用`<select multiple="multiple"> `中的multiple属性让下拉表所有元素显示出来。

最简单的展示代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	  <table border="1px" width="500px">
		  
		<tr>
			<td>分类名称</td>
			<td><input type="text" value="手机数码"></td>
		</tr>
		
		<tr>
			<td>分类描述</td>
			<td><input type="text" value="这里面都是手机数码"></td>
		</tr>
		
		<tr>
			<td>分类商品</td>
			<td>
				<!--左边-->
				<div style="float: left;"> <!--左浮动-->
					已有商品<br>
					<select multiple="multiple">  <!--让选择都显示出来-->
						<option>华为</option>
						<option>小米</option>
						<option>锤子</option>
						<option>oppo</option>
					</select>
					<br>
					<a href="#">>></a><br>
					<a href="#">>>></a><br>
				</div>
				
				<!--右边-->
				<div style="float: right;"> <!--右浮动-->
					未有商品<br>
					<select multiple="multiple">  <!--让选择都显示出来-->
						<option>iPhone</option>
						<option>诺基亚</option>
						<option>ipad</option>
						<option>Mac</option>
					</select>
					<br>
					<a href="#">>></a><br>
					<a href="#">>>></a><br>
				</div>
				
			</td>
		</tr>
		
		<tr>
			<td colspan="2"><input type="submit" value="提交"></td>
		
		</tr>	
	   </table>
	</body>
</html>

页面结果如下：

　　在刚才代码的基础上实现左右的元素可以相互挪动。

<select multiple="multiple" id="leftSelect"  ondblclick="selectOne()">

multiple：为把下拉表中所有可能列出；
ondblclick：表示可以通过双击实现功能

此只展示左边可以一次/多次移动到右边：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	  <script> 
		/*	
			步骤分析：
			1.确定事件：确定为onclick()点击事件
			2.事件触发函数selectOne()
			3.函数要做操作：
					将左边选中的元素--->右边的select中
						1.获取左边的元素
						2.将选中的元素添加到右边的select中
		*/
			function selectOne()
			{
				//1.获取左边的元素
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=leftSelect.options;    //获取当前的值
				//遍历找到被选中的option
				for(var i=0;i<options.length;i++)
				{
					var option1=options[i]; //当前值放入数组
					if(option1.selected) //如果是左边选中的值
					{
						//2.将选中的元素添加到右边的select中
							rightSelect.appendChild(option1);
					}
				}
			}
	
		//将左边一次性挪过去
			function selectAll()
			{
				//1.获取左边的元素
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=leftSelect.options;    //获取当前的值
				//遍历找到被选中的option
				for(var i=options.length-1;i>=0;i--) //倒序
				{
					var option1=options[i]; //当前值放入数组
					rightSelect.appendChild(option1);
				}
			}
			
			
		</script>
	</head>
	<body>
	  <table border="1px" width="500px">
		  
		<tr>
			<td>分类名称</td>
			<td><input type="text" value="手机数码"></td>
		</tr>
		
		<tr>
			<td>分类描述</td>
			<td><input type="text" value="这里面都是手机数码"></td>
		</tr>
		
		<tr>
			<td>分类商品</td>
			<td>
				<!--左边-->
				<div style="float: left;"> <!--左浮动-->
					已有商品<br>
					<select multiple="multiple" id="leftSelect"  ondblclick="selectOne()">  <!--让选择都显示出来-->  <!--ondblclick双击可以直接右移-->
						<option>华为</option>
						<option>小米</option>
						<option>锤子</option>
						<option>oppo</option>
					</select>
					<br>
					<a href="#" onclick="selectOne()">>></a><br>
					<a href="#" onclick="selectAll()">>>></a><br>
				</div>
				
				<!--右边-->
				<div style="float: right;"> <!--右浮动-->
					未有商品<br>
					<select multiple="multiple" id="rightSelect">  <!--让选择都显示出来-->
						<option>iPhone</option>
						<option>诺基亚</option>
						<option>ipad</option>
						<option>Mac</option>
					</select>
					<br>
					<a href="#"><<</a><br>
					<a href="#"><<<</a><br>
				</div>
				
			</td>
		</tr>
		
		<tr>
			<td colspan="2">
				<input type="submit" value="提交">
			</td>
		</tr>	
	   </table>
	</body>
</html>

代码结果如下：

2020-02-07

JS实现表单检验（使用onfoucs等焦点时间）

二、表单检验(innerHTML属性)

　　在之前JS文档里写的检验表单基础上，完成当用户点击用户名时，就提示“用户名长度不能小于6位”。然后如果用户输入的少于6位就提示”请重新输入!”,正确则提示”注册用户名成功!”

JS中常用事件：

onfocus事件：获取焦点()----onfocus="show()"展示提示句
onblur事件：失去焦点()----onblur="checkUsername"检验
onkeyup事件:按键抬起事件()----onkeyup="checkUsername"检验

举例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*
			1.确定事件：onfocus
			2.事件驱动函数
			3.函数需要干一些事情：修改span内容
			*/ 
			function show(){
				var span=document.getElementById("span1");  //获取span标签的当前对象
				span.innerHTML="<font color='red'>用户名长度不能小于6位</font>";	//输出一句话		
			}
			
			
			/*
				校验用户名：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkUsername()
			3.函数需要干一些事情：显示校验结果
			*/
			function checkUsername(){
				var chang=document.getElementById("username").value;  //获取输入的值
				if(chang.length<6)
				{
					var span=document.getElementById("span1");   //获取span标签的当前对象
					span.innerHTML="<font color='red'>请重新输入!</font>";	//输出一句话
				}
				else
				{
					var span=document.getElementById("span1");   //获取span标签的当前对象
					span.innerHTML="<font color='red'>注册用户名成功!</font>";	//输出一句话
				}
			}
		
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html">  <!--要用表单去提交-->

			//给input输入里面加名字id 然后加一个show展示的方法  然后给取消焦点事件和按键抬起焦点事件
			用户名：<input type="text" id="username" onfocus="show()" onblur="checkUsername()" onkeyup="checkUsername()">
			//给予一个span标签输出结果 给一个id名字	   
					<span id="span1"></span><br>
			密码：<input type="password" id="password"><br>
			确定密码：<input type="password" id="password"><br>
			邮箱：<input type="text" id="email"><br>
			手机号：<input type="text" id="text"><br>
			<input type="submit" value="提交" >		
		</form>
	</body>
</html>

输入少于6位会提示：

输入满足条件会提示：

表单校验(复杂版)

此为主代码(后面附外部引入的js文件和跳转到的自动轮播文件代码)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			引入外部的js文件  最后要调用其中的对比邮箱正误
		-->
		<script type="text/javascript" src="../regutils.js"></script>
		
		<script>
			/*
			1.确定事件：onfocus
			2.事件驱动函数
			3.函数需要干一些事情：修改span内容
			*/ 
			function showTips(spanID,msg){
				var span=document.getElementById(spanID);  //获取 span标签的id
				span.innerHTML=msg;	  //更改输出span一句话
			}
			
			
			/*
				校验用户名：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkUsername()
			3.函数需要干一些事情：显示校验结果
			*/
			function checkUsername(){
				var chang=document.getElementById("username").value;	
				if(chang.length<6)
				{
					var span=document.getElementById("span1");
					span.innerHTML="<font color='red'>格式不对，请重新输入用户名!</font>";	
					return false;
				}
				else
				{
					var span=document.getElementById("span1");
					span.innerHTML="注册用户名成功!";	
					return true;
				}
			}
			
			
			/*
				校验密码：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkpassword()
			3.函数需要干一些事情：显示校验结果
			*/
						function checkpassword(){
							//获取密码输入
							var chang = document.getElementById("password").value;
		
							//对密码输入进行校验
							if(chang.length < 6)
							{
								var span=document.getElementById("span2");
								span.innerHTML = "<font color='red' size='2'>格式不对，请重新输入密码!</font>";
								return false;
							}
							else
							{
								var span=document.getElementById("span2");
								span.innerHTML = "注册密码成功!";
								return true;
							}
						}
			
			
			/*
			重复校验密码：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkrepassword()
			3.函数需要干一些事情：显示是否正确
			*/
			function checkrepassword(){
				var chang1=document.getElementById("password").value;
				var chang2=document.getElementById("repassword").value;	
				if(chang1!= chang2)
				{
					var span=document.getElementById("span3");
					span.innerHTML = "<font color='red'>对不起,两次密码不一致</font>";
					return false;
				}
				else
				{
					var span=document.getElementById("span3");
					span.innerHTML = "密码一致";
					return true;
				}
			}	
			
			/*
				校验邮箱：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkMail()
			3.函数需要干一些事情：显示校验结果
			*/
			function checkMail(){
				var email=document.getElementById("email").value; //获取当前输入的email值
				var flag=checkEmail(email);  //设置一个flag用来判断输入的email和系统js导入的文件是否相等
				var span=document.getElementById("span4");
				if(flag)  //判断flag是否相等
				{
					span.innerHTML = "邮箱可用!";
					return true;
				}
				else
				{
					span.innerHTML = "<font color='red'>邮箱格式有误!</font>";
					return false;
				}
			}
			
			//校验表格
			function checkForm()
			{
				var flag = checkUsername() && checkpassword() && checkrepassword() && checkMail(); //只有都通过才可以使用
				return flag;
			}
			
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >  <!--要用表单去提交-->
			用户名：<input type="text" id="username" onfocus="showTips('span1','输出的用户名必须不低于6位')" onblur="checkUsername()" onkeyup="checkUsername()">
					<span id="span1"></span><br>
			密码：<input type="password" id="password" onfocus="showTips('span2','输出的密码必须不低于6位')" onblur="checkpassword()" onkeyup="checkpassword()">
					<span id="span2"></span><br>
			确定密码：<input type="password"  id="repassword" onfocus="showTips('span3','请输入密码')" onblur="checkrepassword()" onkeyup="checkrepassword()">
					<span id="span3"></span><br>
			邮箱：<input type="text" id="email" onfocus="showTips('span4','请输入邮箱')" onblur="checkMail()" >
					<span id="span4"></span><br>
			手机号：<input type="text" id="email"><br>
			<input type="submit" value="提交" align="center">	
		</form>
	</body>
</html>

代码中使用到的图片自自动轮播.html文件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			var i=0;
			function changeImg(){
				var img=document.getElementById("img1"); //1.先获取当前对象
				
				//计算出当前要切换到第几章图片
				var c=i%3+1;
				
				img.src="../img/"+c+".jpg";
				i++;
			}
			
			function init(){
				setInterval("changeImg()",1000);
			}
			
			
		</script>
	</head>
	
	<body onload="init()">
		<img src="../img/1.jpg" width="100%" id="img1"/>
		
	</body>
</html>

代码中使用到的regutils.js文件


/* 
用途：检查输入的Email信箱格式是否正确 
输入：strEmail：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkEmail(strEmail) 
{      
    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if ( emailReg.test(strEmail) ) {
        return true;
    }
    else {
//      alert("您输入的Email地址格式不正确！");
        return false;
    }
};
 
/*
用途：校验ip地址的格式 
输入：strIP：ip地址 
返回：如果通过验证返回true,否则返回false； 
*/
function isIP(strIP) 
{
    if (isNull(strIP)) {
        return false;
    }
    var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ //匹配IP地址的正则表达式 
    if (re.test(strIP)) {
        if ( RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) {
            return true;
        }
    }
    return false;
};
 
/* 
用途：检查输入手机号码是否正确 
输入：strMobile：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkMobile( strMobile )
{	//13588888888
    var regu = /^[1][345678][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(strMobile)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入的电话号码格式是否正确 
输入：strPhone：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkPhone( strPhone ) 
{
    var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
    var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
    var prompt = "您输入的电话号码不正确!"; 
    if ( strPhone.length > 9 ) {
        if ( phoneRegWithArea.test(strPhone) ) {
            return true;
        }
        else {
            alert( prompt );
            return false;
        }
    }
    else {
        if ( phoneRegNoArea.test( strPhone ) ) {
            return true;
        }
        else {
            alert( prompt );
            return false;
        }
    }
};
 
/* 
用途：检查输入字符串是否为空或者全部都是空格 
输入：str 
返回：如果全是空返回true,否则返回false 
*/
function isNull( str )
{
    if ( str == "" ) {
        return true;
    }
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
};
 
/* 
用途：检查输入对象的值是否符合整数格式 
输入：str 输入的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isInteger( str )
{
    var regu = /^[-]{0,1}[0-9]{1,}$/;
    return regu.test(str);
};
 
/* 
用途：检查输入字符串是否符合正整数格式 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumber( s )
{
    var regu = "^[0-9]+$";
    var re = new RegExp(regu);
    if (s.search(re) != - 1) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否是带小数的数字格式,可以是负数 
输入：str：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isDecimal( str )
{
    if (isInteger(str)) {
        return true;
    }
    var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
    if (re.test(str)) {
        if (RegExp.$1 == 0 && RegExp.$2 == 0) {
            return false;
        }
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入对象的值是否符合端口号格式 
输入：str 输入的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isPort( str )
{
    return (isNumber(str) && str < 65536);
};
 
/* 
用途：检查输入字符串是否符合金额格式,格式定义为带小数的正数，小数点后最多三位 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isMoney( s )
{
    var regu = "^[0-9]+[\.][0-9]{0,3}$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由英文字母和数字和下划线组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumberOr_Letter( s )
{
    //判断是否是数字或字母 
    var regu = "^[0-9a-zA-Z\_]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由英文字母和数字组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumberOrLetter( s )
{
    //判断是否是数字或字母 
    var regu = "^[0-9a-zA-Z]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由汉字、字母、数字组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isChinaOrNumbOrLett( s )
{
    //判断是否是汉字、字母、数字组成 
    var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：判断是否是日期 
输入：date：日期；fmt：日期格式 
返回：如果通过验证返回true,否则返回false 
*/
function isDate( date, fmt ) 
{
    if (fmt == null) {
        fmt = "yyyyMMdd";
    }
    var yIndex = fmt.indexOf("yyyy");
    if (yIndex ==- 1) {
        return false;
    }
    var year = date.substring(yIndex, yIndex + 4);
    var mIndex = fmt.indexOf("MM");
    if (mIndex ==- 1) {
        return false;
    }
    var month = date.substring(mIndex, mIndex + 2);
    var dIndex = fmt.indexOf("dd");
    if (dIndex ==- 1) {
        return false;
    }
    var day = date.substring(dIndex, dIndex + 2);
    if (!isNumber(year) || year > "2100" || year < "1900") {
        return false;
    }
    if (!isNumber(month) || month > "12" || month < "01") {
        return false;
    }
    if (day > getMaxDay(year, month) || day < "01") {
        return false;
    }
    return true;
};
function getMaxDay(year, month) 
{
    if (month == 4 || month == 6 || month == 9 || month == 11) {
        return "30";
    }
    if (month == 2) {
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            return "29";
        }
        else {
            return "28";
        }
        return "31";;
    }
};
 
/* 
用途：字符1是否以字符串2结束 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isLastMatch(str1, str2) 
{
    var index = str1.lastIndexOf(str2);
    if (str1.length == index + str2.length) {
        return true;
    }
    return false;
};
 
/* 
用途：字符1是否以字符串2开始 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isFirstMatch(str1, str2) 
{
    var index = str1.indexOf(str2);
    if (index == 0) {
        return true;
    }
    return false;
};
 
/* 
用途：字符1是包含字符串2 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isMatch(str1, str2) 
{
    var index = str1.indexOf(str2);
    if (index ==- 1) {
        return false;
    }
    return true;
};
 
/* 
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确，且结束如期>=起始日期 
输入：startDate：起始日期，字符串; endDate：结束如期，字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkTwoDate( startDate, endDate ) 
{
    if ( !isDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    }
    else if ( !isDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    }
    else if ( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
};
 
/* 
用途：检查复选框被选中的数目 
输入：checkboxID：字符串 
返回：返回该复选框中被选中的数目 
*/
function checkSelect( checkboxID ) 
{
    var check = 0;
    var i = 0;
    if ( document.all(checkboxID).length > 0 ) 
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            if ( document.all(checkboxID).item( i ).checked ) {
                check += 1;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            check = 1;
        }
    }
    return check;
}
function getTotalBytes(varField) 
{
    if (varField == null) {
        return - 1;
    }
    var totalCount = 0;
    for (i = 0; i < varField.value.length; i++) {
        if (varField.value.charCodeAt(i) > 127) {
            totalCount += 2;
        }
        else {
            totalCount++ ;
        }
    }
    return totalCount;
}
function getFirstSelectedValue( checkboxID )
{
    var value = null;
    var i = 0;
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ )
        {
            if ( document.all(checkboxID).item( i ).checked ) {
                value = document.all(checkboxID).item(i).value;
                break;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            value = document.all(checkboxID).value;
        }
    }
    return value;
}
function getFirstSelectedIndex( checkboxID )
{
    var value = - 2;
    var i = 0;
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            if ( document.all(checkboxID).item( i ).checked ) {
                value = i;
                break;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            value = - 1;
        }
    }
    return value;
}
function selectAll( checkboxID, status )
{
    if ( document.all(checkboxID) == null) {
        return;
    }
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            document.all(checkboxID).item( i ).checked = status;
        }
    }
    else {
        document.all(checkboxID).checked = status;
    }
}
function selectInverse( checkboxID ) 
{
    if ( document.all(checkboxID) == null) {
        return;
    }
    if ( document.all(checkboxID).length > 0 ) 
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) 
        {
            document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;
        }
    }
    else {
        document.all(checkboxID).checked = !document.all(checkboxID).checked;
    }
}
function checkDate( value ) 
{
    if (value == '') {
        return true;
    }
    if (value.length != 8 || !isNumber(value)) {
        return false;
    }
    var year = value.substring(0, 4);
    if (year > "2100" || year < "1900") {
        return false;
    }
    var month = value.substring(4, 6);
    if (month > "12" || month < "01") {
        return false;
    }
    var day = value.substring(6, 8);
    if (day > getMaxDay(year, month) || day < "01") {
        return false;
    }
    return true;
};
 
/* 
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确或都为空且结束日期>=起始日期 
输入：startDate：起始日期，字符串; endDate： 结束日期，字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkPeriod( startDate, endDate ) 
{
    if ( !checkDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    }
    else if ( !checkDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    }
    else if ( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
};
 
/* 
用途：检查证券代码是否正确 
输入：secCode:证券代码 
返回：如果通过验证返回true,否则返回false 
*/
function checkSecCode( secCode ) 
{
    if ( secCode.length != 6 ) {
        alert("证券代码长度应该为6位");
        return false;
    }
    if (!isNumber( secCode ) ) {
        alert("证券代码只能包含数字");
        return false;
    }
    return true;
};
 
/*
function:cTrim(sInputString,iType) 
description:字符串去空格的函数 
parameters:iType：1=去掉字符串左边的空格;2=去掉字符串左边的空格;0=去掉字符串左边和右边的空格 
return value:去掉空格的字符串 
*/
function cTrim(sInputString, iType) 
{
    var sTmpStr = ' ';
    var i = - 1;
    if (iType == 0 || iType == 1) 
    {
        while (sTmpStr == ' ') {
            ++i;
            sTmpStr = sInputString.substr(i, 1);
        }
        sInputString = sInputString.substring(i);
    }
    if (iType == 0 || iType == 2) 
    {
        sTmpStr = ' ';
        i = sInputString.length;
        while (sTmpStr == ' ') {
            --i;
            sTmpStr = sInputString.substr(i, 1);
        }
        sInputString = sInputString.substring(0, i + 1);
    }
    return sInputString;
};

结果展示如下：

2020-02-07

JS实现表格变色和全选问题

三、表格问题

表格隔行变色：

　　使用数组(row=rows[i])存放每一行(tab.rows)然后奇偶数的方式换颜色。


<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			1.确定事件：文档加载完成 onload
			2.事件触发函数：init()
			3.函数：操作页面的元素
					要操作表格每一行--动态改变背景颜色
		
		-->
		<script>
			function init(){
				//得到表格
				var tab=document.getElementById("tab");
				//得到表格每一行
				var rows=tab.rows;
				//奇偶数更改颜色
				for(var i=1;i<rows.length;i++)
				{
					var row=rows[i];   //得到其中的某行
					if(i%2==0)
					{
						row.bgColor="red";
					}
					else
					{
						row.bgColor="blue";
					}		
				}		
			}	
		</script>
		
	</head>
	<body onload="init()">   //onload时间放在body体内
		<table border="1px" width="600px" id="tab">  给表格一个id名方便得到表格
			
			<tr >
				<td>
					<input type="checkbox" />   <!--复选框-->
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			
			<!--第一行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			
			<!--第二行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>2</td>
				<td>日用品</td>
				<td>洗衣粉</td>
				<td>这里面的洗衣服很干净的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr> 
			
			<!--第四行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第五行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			
		</table>
	</body>
</html>

页面成果展示如下：

表格的全选和全不选(在前面的基础上)

使用getElementsByTagName()/getElementsByName()获取每个分类项目的当前值存入一个数组
1.var checks=document.getElementsByTagName("input");直接是将所有的input选项拿出来(但是不一定所有的input都有单选框)。
2.var checks = document.getElementsByName("checkone");可以在要选的input里面加id为checkone，可以获取。

主要代码：


function checkAll(){
					//获取当前第一个按钮的状态
					var check1=document.getElementById("check1");  //给第一个input加一个id名为check1
					var checked=check1.checked; //把第一个值放在一个checked里面存着
					
					//获得所有分类项的checkbox
					var checks=document.getElementsByTagName("input");
					//var checks = document.getElementsByName("checkone");
					
					//修改每一个checkbox的状态
					for(var i = 0; i < checks.length; i++)
					{
						var checkone = checks[i];//让之前的每个数取出来
						checkone.checked = checked;//设置成和第一个一样的值(全选/全不选)
					}
				
				}

以下是完整代码：


<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			1.确定事件：文档加载完成 onload
			2.事件触发函数：init()
			3.函数：操作页面的元素
					要操作表格每一行--动态改变背景颜色	
		-->
		<script>
			function init(){
				//得到表格
				var tab=document.getElementById("tab");
				//得到表格每一行
				var rows=tab.rows;
				//奇偶数更改颜色
				for(var i=1;i<rows.length;i++)
				{
					var row=rows[i];//得到其中的某行
					if(i%2==0)
					{
						row.bgColor="red";
					}
					else
					{
						row.bgColor="blue";
					}					
				}					
			}
			
			/*
					全选和全不选步骤分析:
						 1.确定事件: onclick 单击事件
						 2.事件触发函数: checkAll()
						 3.函数要去做一些事情:
								    获得当前第一个checkbox的状态
								 	获得所有分类项的checkbox
								 	修改每一个checkbox的状态	
			*/
			
			function checkAll(){
					//获取当前第一个按钮的状态
					var check1=document.getElementById("check1");
					var checked=check1.checked;
					
					//获得所有分类项的checkbox
					var checks=document.getElementsByTagName("input");
					//var checks = document.getElementsByName("checkone");
					//测试是不是有六个：alert(checks.length);
					for(var i = 0; i < checks.length; i++)
					{
					//修改每一个checkbox的状态
						var checkone = checks[i];
						checkone.checked = checked;
					}
				
				}
			
		</script>
	
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			
			<tr >
				<td>
					<input type="checkbox" onclick="checkAll()" id="check1" >
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			
			<!--第一行-->
			<tr>
				<td>
					<input type="checkbox" name="checkone" >  <!--复选框-->
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			
			<!--第二行-->
			<tr>
				<td>
					<input type="checkbox" name="checkone">  <!--复选框-->
				</td>
				<td>2</td>
				<td>日用品</td>
				<td>洗衣粉</td>
				<td>这里面的洗衣服很干净的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td>
					<input type="checkbox" name="checkone">  <!--复选框-->
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr> 
			
			<!--第四行-->
			<tr>
				<td>
					<input type="checkbox"  name="checkone">  <!--复选框-->
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第五行-->
			<tr>
				<td>
					<input type="checkbox"  name="checkone">  <!--复选框-->
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			
		</table>
	</body>
</html>

页面成果展示如下：

2020-02-07

JS实现DOM操作（关于select标签的下拉省市联动）

一、DOM介绍

DOM(增删查改)：DOcument Object Model–控制我们的文档(页面显示的部分)

DOM节点细节展示：

DOM关于不断添加p标签的例子：

1.创建一个p标签—createElement(“p”);
2.创建一个文本节点—document.createTextNode(“里面写要添加什么”);
3.然后将两者连接起来—p.appendChild(textNode)
4.将前两个连接的节点连接到div标签内—div.appendChild(p)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*动态添加*/
			function dianji()
			{
				var div=document.getElementById("div1"); //获取当前div标签
				
				var p=document.createElement("p");//创建了一个 <P>节点
				var textNode=document.createTextNode("文本内容"); //创建了一个 文本节点
				p.appendChild(textNode);//将p和文本节点关联起来
				div.appendChild(p);//将p添加到目标div中
				
			}
					
		</script>
	</head>
	<body>
		<input type="button" value="点击" onclick="dianji()">
		<!--动态的向div添加节点-->
		<div id="div1"></div>
	</body>
</html>

结果展示如下：

二、省市联动(主要使用DOM创建节点知识点)

省市联动：将select标签选择陕西省时候--后面的选择要弹出陕西省的市。

有个关键点(为了防止选完省之后清除掉能够选其他的省)：

	//创建option节点
		var option1=document.createElement("option");
					
	//创建城市文本节点
		var textNode=document.createTextNode(cityText);
				
	//将两个节点关联起来
		option1.appendChild(textNode);
					
	//添加到城市的select中
	
		var tian= document.getElementById("city");  //通过id把城市的select标签找到
		tian.appendChild(option1);  //把之前两个节点连接好的东西连接起来
		tian.options.length=0; //每次选完省之后清空

```	
- **总结:**

	
	创建标签节点：createElement("标签名")
	创建标签内文字节点：createTextNode(内容)
	两个节点关联：标签节点.appendChild(文字节点)
	

**具体代码实现：**

2020-02-05

JS实现页面表单表格

一、页面定时弹出广告(setInterval定时器和xxx.style.display属性)

1.1 技术分析

定时器
setInterval:每隔多少毫秒执行一次函数
setTimeout：多少毫秒之后执行一次函数(只执行一次)
clearInterval：清除
clearTimeout：清除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//window对象是一个最顶层对象(setInterval之前的window.可以取消)
			
			function test()
			{
				console.log("setInterval 调用了");  //输出  "setInterval 调用了"
			}
			
			
			var timeID;//用于存设置变量
			function start()
			{
				timeID=setInterval("test()",2000); //隔2秒打开一次test()方法
			}
			
			function end()
			{
				clearInterval(timeID);  //清除
			}		
		</script>
	</head>

	<body>
		<input type="button" value="开启定时器" onclick="start()"><br /> //定义两个触发事件按钮
		<input type="button" value="关闭定时器" onclick="end()"><br />
	</body>

</html>

显示广告
xxx.style.display="none";
隐藏广告
xxx.style.display="block";

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			//文档加载顺序:从上到下
			function hideImg(){
				var img=document.getElementById("img1");//1.先获取当按钮对象
				img.style.display="none";  //2.display属性---无(×)
			}
		
			function showImg(){
				var img=document.getElementById("img1");//1.先获取当按钮对象
				img.style.display="block";  //2.display属性---有(√)
			}
		
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()">
		<input type="button" value="隐藏"  onclick="hideImg()"><br>
		<img src="../img/1.jpg" id="img1" >
	</body>
</html>

1.2 步骤分析

1. 确定事件：页面加载完成时间 onload触发
2. 时间要触发函数 init()
3. init函数里面做一件事情：
   3.1 启动定时器(setTimeout)
   3.2 显示一个广告
     3.2.1 在开启一个定时器五秒钟后取消广告


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//三秒后显示广告
			function show(){
				var img=document.getElementById("div1");
					img.style.display="block";	//display改为√	
					setTimeout("hide()",5000);// 放过一个定时器 选择一次性的setTimeout(函数，时间间隔)
					}
				
				//五秒后关闭广告
				function hide(){
				var img=document.getElementById("div1");
					img.style.display="none";			//display改为×	
				}
			
			//按钮触发的事件
			function init(){
				setTimeout("show()",3000);// 放过一个定时器 选择一次性的setTimeout(函数，时间间隔)
			}
			
		</script>
	</head>

	<body onload="init()">
		<img id="div1" src="../products/hao/small02.jpg" width="100%"  style="display: none;" >
	</body>

</html>

2020-02-05

JS实现轮播图

一、实现轮播图技术需求：

可以切换照片/图片


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function changeImg()
			{
				var img=document.getElementById("img1"); //获取当前照片
						img.src="../img/2.png";
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="切换图片" onclick="changeImg()">
		<br>
		<img src="../img/1.jpg" id="img1"> //给定一个id
		
	</body>
</html>

定时切换(一定时间)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//window对象是一个最顶层对象(setInterval之前的window.可以取消)
			function test()
			{
				console.log("setInterval 调用了");
			}
			//1.2秒执行后继续等2秒执行
			//setInterval("test()",2000);
			//2.2秒执行后不再执行
			//setTimeout("test()",2000);
			
			var timeID;
			function start()
			{
				timeID=setInterval("test()",2000); //2秒执行一次test()
			}
			
			function end()
			{
				clearInterval(timeID); //停止
			}
			
			
		</script>
	</head>
	<body>
		<input type="button" value="开启定时器" onclick="start()"><br />
		<input type="button" value="关闭定时器" onclick="end()"><br />
	</body>
</html>

二、步骤分析

1. 确定事件：文档加载完成的事件 onload
2. 事件要触发：init()
3. 函数内要做的事情：
    3.1 开启定时器：执行切换图片的函数:changeimg(获取要切换图片的要素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			var i=0;
			function changeImg(){
				var img=document.getElementById("img1"); //1.先获取当前对象
				
				//2.计算出当前要切换到第几张图片
				var c=i%3+1;
				
				img.src="../img/"+c+".jpg";  //3.关键在于"c"获取当前哪个图片
				i++; //结束后加1为了循环
			}
			
			function init(){  //init函数需要在1秒后实现changeImg函数
				setInterval("changeImg()",1000);  
			}
			
			
		</script>
	</head>
	
	<body onload="init()">   //body内onload事件直接出发init函数
		<img src="../img/1.jpg" width="100%" id="img1"/>  目前放图片1 然后给名为img1为了获取方便
		
	</body>
</html>

2020-02-04

JS

一、JavaScript概述
　　JavaScript是一种直译式脚本语言。(源码—>由浏览器解释执行)

JS的组成
ECMAScript：核心部分定义js的语法规范
DOM：document Object Model 文档对象模型主要是用来管理页面的

BOM：Browser Object Model 浏览器对象模型主要是页面前后退页面刷新地址栏历史记录屏幕宽高

二、JS的语法

变量弱类型(var 代替一切类型使用)
区分大小写
语句之后的分号(可有可无)
写在script标签

三、JS的数据类型(内部自动转换)

基本类型
string number boolean undefined object

引用类型
对象，内置对象

四、运算符和语句

运算符和java一样
其中的”===”必须是值和类型都必须相等
语句和java一样

五、JS的输出

alert()直接弹框
document.write()向页面输出
console.log()向控制台输出
innerHTML向页面输出(可以识别h5语言)
获取页面元素：document.getElementByld(“id的名称”)

JS声明变量

1	var 变量名称=变量的值

JS声明函数

　　var 函数名=function()
{

}

　　function 函数名()
{

}

六、JS开发步骤
1. 指定事件
2. 事件—>函数(触发一个函数)
3. 函数里—>页面元素(操作)+交互动作

例1：做一个弹框—>点击—->显示“我被点击了”


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
		
		function dianwo()
		{
			alert("我被点击了");  //dianwo函数里面做一个弹窗显示我被点击了
		}
		
		</script>

	</head>
	<body>

		<input type="button" value="点我，弹框" onclick="dianwo()">  //做一个弹框 然后onclick到dianwo函数

	</body>
</html>

案例展示如下：

先是显示一个弹框：

点击弹框后弹出函数内容：

例2：替换文字


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		
		function dianwo()
		{
			var div =document.getElementById("name");   使用document.getElementById("id的名字");
			div.innerHTML="<font color='red'>内容被替换掉了</font>"; 使用innerHTML输出
		}
		
		</script>
	</head>
	<body>
		<input type="button" value="点我修改div中内容" onclick="dianwo()">
		
		<div id="name">
			这里的内容一会就要被替换掉!  //div是注明一个id为name的标签
		</div>
	</body>
</html>

打开浏览器右键选择“检查”-“Elements”-“Properties”

点击前：

点击后：

例3：注册时候检验所有信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function checkForm()
			{
					//获取用户输入的内容
					var input1=document.getElementById("username");  //给一个id获取输入的值
					var chang1=input1.value;  //获取当前值
					if(chang1.length>=6)
					{
						//不改变布尔值是为了用户名正确要去验证邮箱正误
					}
					else
					{
						alert("用户名少于6位！");
						return  false;
					}
						
			
					//获取用户输入的邮箱
					var input2=document.getElementById("email");
					var chang2=input2.value;
					if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(chang2)) //邮箱的正则表达式使用test方法对比
					{
						alert("校验成功");
					} 
					else
					{
						alert("校验失败");
						return false;
					}
				return true;
				
			}
		</script>
	</head>
	<body>
		<form action="../01-网站首页的优化/网站首页.html" onsubmit="return checkForm()">  
		<!--要用表单去提交-->
			用户名：<input type="text" id="username"><br>
			密码：<input type="password" id="password"><br>
			邮箱：<input type="text" id="email"><br>
			<input type="submit" value="提交" >	
		</form>
	</body>
</html>

2020-02-04

CSS网站注册案例

一、CSS盒子模型

内边距：

padding-top　　　上
padding-right　　右
padding-bottom　下
paddingleft　　　左

外边距：

margin-top　　　　上
margin-right　　　下
margin-bottom　　左
margin-left　　　　右

举例：

padding：10px　　　　　　　　　　　上下左右都是10px
padding：10px 20px 　　　　　　　　上下是10px 左右是20px
padding：10px 20px 30px　　　 　　上是10px 右是20px 下是30px  左是20px(默认随右边)
padding：10px 20px 30px 40px　　 上是10px 右是20px 下是30px  左是40px

css绝对位置(div标签内)

positionabsolute
top 控制距离顶部的位置
left 控制距离左边的位置


<body>
		//可以让红色框距离顶部200px同时距离左边200px
	<div style="border: 5px solid red;width: 400px;height: 400px;position: absolute;top: 200px;left: 200px;">
		h黑马啊哈哈哈哈
	</div>
</body>

实现结果如下：

二、网站注册案例(使用CSS)

界面设计分析：

1. 第一部分是LOGO部分    用CSS类加载器
2. 第二部分是导航菜单        用div标签
3. 第三部分是注册部分        使用div套div再套一个table表格
4. 第四部分是FOOTER图片  用div标签
5. 第五部分是一堆超链接   用div标签

具体代码(对比H5只有第三部分更改较大):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.logo{
				float: left;
				width: 33%;
				
				height: 60px;
				line-height: 60px;
			}
		
		</style>
	</head>
	<body>
		<!--1. 第一部分是LOGO部分-->
		<div>
			<div class="logo">
				<img src="../img/logo2.png" />
			</div>
			<div class="logo">
				<img src="../img/header.png" />
			</div>
			<div class="logo">
				<a href="#">登录</a>
				<a href="#">注册</a>
				<a href="#">购物车</a>
			</div>
		</div>
		
		<!--清除浮动-->
		<div style="clear: both;"></div>
		
		<!--2. 第二部分是导航菜单-->
		<div style="color: #000000;height: 50px;">
			<a href="#" class="amenu">首页</a>
			<a href="#" class="amenu">手机数码</a>
			<a href="#" class="amenu">电脑办公</a>
			<a href="#" class="amenu">鞋靴箱包</a>
			<a href="#" class="amenu">香烟酒水</a>
		</div>
		
		<!--3. 第三部分是注册部分-->
		<div style="background: url(../image/regist_bg.jpg);height: 550px;"> //主要是背景加一个图片 高设置为整个div的高度
			<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgtay;width: 50%;height: 50%;background-color: white;">  //里面的div为那个白色框框 使用绝对位置距离顶部200px,左边350px ,边框为5px，高和宽都是最大的部分的一半，背景色为白色
				<table width="60%" align="center">  //用于展示注册的信息
										<tr>
											<td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td>
											
										</tr>
										<tr>
											<td>用户名:</td>
											<td><input type="text"/></td>
										</tr>
										<tr>
											<td>密码:</td>
											<td><input type="password"/></td>
										</tr>
										<tr>
											<td>确认密码:</td>
											<td><input type="password"/></td>
										</tr>
										<tr>
											<td>email:</td>
											<td><input type="email"/></td>
										</tr>
										<tr>
											<td>姓名:</td>
											<td><input type="text"/></td>
										</tr>
										<tr>
											<td>性别:</td>
											<td><input type="radio" name="sex"/> 男
											<input type="radio" name="sex"/> 女
											<input type="radio" name="sex"/> 妖
											</td>
										</tr>
										<tr>
											<td>出生日期:</td>
											<td><input type="date"/></td>
										</tr>
										<tr>
											<td>验证码:</td>
											<td><input type="text"/></td>
										</tr>
										<tr>
											<td></td>
											<td><input type="submit" value="注册"/></td>
										</tr>
									</table>
			</div>
			
			
		</div>
		
		<!--4. 第四部分是FOOTER图片-->
		<div>
			<img src="../img/footer.jpg" width="100%"/>
		</div>
		
		<!--5. 第五部分: 放一堆超链接-->
		<div style="text-align: center;">
						        
			<a href="#">关于我们</a>
			<a href="#">联系我们</a>
			<a href="#">招贤纳士</a>
			<a href="#">法律声明</a>
			<a href="#">友情链接</a>
			<a href="#">支付方式</a>
			<a href="#">配送方式</a>
			<a href="#">服务声明</a>
			<a href="#">广告声明</a>
			<br />
				Copyright © 2005-2016 传智商城 版权所有
		</div>
		
	</body>
</html>

页面结果如下：

2020-02-04

CSS+div实现网站首页优化

　　对于上次H5写的网站首页进行优化。主要是给共同变化项目给css类加载器优化并且使用css浮动和div标签配套使用。

分析如下：

1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图 
5. 第四部分: 主要是div标签里面要更改浮动加了css类加载器
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接

《我以//xxx为辅助解释，相当于前端的》


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style> //css必备

		//用在第一个logo部分
		.logo{ 
				float:left;
				width:33%;  //让三个各占33%的大小
				border-width: 1px;
				border-style: solid;
				border-color: white;  //边框是白色
				height: 60px;	 //高为60(px为单位)
			  }	

		//用于第二个五个超链接部分
		.amenu{             
				color: white;
				text-decoration: none;
				height: 50px;
				line-height: 50px;
				}
			
		//用于最复杂的高压锅部分
		.product{
					float: left; 
					text-align: center; 
					width: 16%; 
					height: 240px;  //最左边图片div为480px(要有两行)
				}	 
			 
		</style>

	</head>

	<body>
		<div>
			<!--2. 第一部份: LOGO部分: 嵌套三个div-->
			<div style="text-align: -webkit-center;">
				<div class="logo"><img src="../img/logo2.png"/></div>
				<div class="logo"><img src="../img/header.png"/></div>
				<div class="logo" >
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<!--清除浮动(上下影响)-->
			<div style="clear:both;"></div>
			
			<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
			<div style="background-color: black;">  //背景黑色
				<a href="#" class="amenu">首页</a>  //用类加载器设置白色和高宽等属性
				<a href="#" class="amenu">手机数码</a>
				<a href="#" class="amenu">电脑办公</a>
				<a href="#" class="amenu">鞋靴箱包</a>
				<a href="#" class="amenu">香烟酒水</a>
			</div>
			
			<!--4. 第三部分: 轮播图--> 
			<div>
				<img src="../img/1.jpg" width="100%"/>
			</div>
			
			<!--5. 第四部分:--> 
						<div>
							<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>  //先设置好第一部分的最新商品栏
							
							<!--左侧广告图-->
							<div style="width: 15%; height: 480px;  float: left;">
								<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
							</div>
							<!--
			                	右侧商品
			                -->
			                <div style="width: 84%; height: 480px;float: left;">
			                	<div style="height: 240px; width: 50%; float: left;">
			                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
			                	</div>
								<div class="product">  //都使用类加载器设置共同属性
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								<div class="product">
			                		<img src="../products/hao/small08.jpg" />
			                		<p>高压锅</p>
			                		<p style="color: red;">$998</p>
			                	</div>
								
			                </div>
						</div>
			
			 
			<!--6. 第五部分: 直接放一张图片-->
			<div>
					<img src="../products/hao/ad.jpg" width="100%"/>  //保持在一行100%
			</div>
			
			<!--7. 第六部分: 抄第四部分的-->
			<div>
				<!--5. 第四部分:--> 
							<div>
								<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
								
								<!--左侧广告图-->
								<div style="width: 15%; height: 480px;  float: left;">
									<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
								</div>
								<!--
				                	右侧商品
				                -->
				                <div style="width: 84%; height: 480px;float: left;">
				                	<div style="height: 240px; width: 50%; float: left;">
				                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
									<div class="product">
				                		<img src="../products/hao/small08.jpg" />
				                		<p>高压锅</p>
				                		<p style="color: red;">$998</p>
				                	</div>
				                </div>
							</div>
			</div>
			
			<!--8. 第七部分: 放置一张图片-->
			<div>
					<img src="../img/footer.jpg" width="100%"/>
			</div>
			
			<!--9. 第八部分: 放一堆超链接-->
			<div style="text-align: center;">  //居中
				
									<a href="#">关于我们</a>
									<a href="#">联系我们</a>
									<a href="#">招贤纳士</a>
									<a href="#">法律声明</a>
									<a href="#">友情链接</a>
									<a href="#">支付方式</a>
									<a href="#">配送方式</a>
									<a href="#">服务声明</a>
									<a href="#">广告声明</a>
									<br/>
					Copyright © 2005-2016 传智商城 版权所有
			</div>
		</div>
	</body>
</html>

成果展示如下：

2020-02-02

CSS和DIV

一、CSS
Cascading Style Sheets：层叠样式表

块标签(div span)

div(自带换行)
span


<body>
		<span>张安</span>    //在一行
		<span>啊哈哈 </span>
	</body>


<body>
		<div>张三</div>  //自动换行 所以在两行
		<div>李四</div>
	</body>

二、CSS选择器入门(只显示head和body内容)

1.元素选择器　标签元素名{}　　<div>XXX</div>
2.id选择器　　#id名称{}　　<div id="名字">XXX</div>
3.类选择器　　.类名{}　　<div class="名字">XXX</div>
4.属性选择器　a[href][title=’title名字’]　　<div title="名字">XXX</div>　
5.后代选择器(层)　h1 em{}　　将h1下面的em标签改变
6.子元素选择器 h1>em{}
7.伪类选择器　改变点击前后的颜色变化

元素选择器(改一个标签的)

元素名称{
		属性名称：值
		属性名称：值
		属性名称：值
		}


<head>
	<meta charset="utf-8">
	<title></title>
		<style>
			span   //把span标签的都改为红色
				{
					color:red;
				}		
		</style>
	
</head>

<body>
	<span>这是一个元素选择器</span>
	<span>这是一个元素选择器</span>
	<span>这是一个元素选择器</span>
</body>

结果如下：

ID选择器(改一个id的)

以#开头
#ID的名称{
			属性名称：值
			属性名称：值
		}

	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			#div1{
				color: red;   //把id=div的改为红色
			}
		</style>

	</head>

	<body>
		
		<div id="div1">大一</div>  //给第一行一个id名字  必须唯一！！！！！！！！！1
		<div>大二</div>
		<div>大三</div>
		<div>大四</div>

	</body>
</html>

结果如下：

类选择器(改一类的)

以.开头
.类的名字{
			属性名称：值	
			属性名称：值	
		}

<head>
	<meta charset="utf-8">
	<title></title>
	
	<style>
	.da{   //把da这个类的都改成红色
		color:red;
		}	
		
	.gao{	//把gao这个类的都改成红色
		 color: blue;
		}	
	</style>

</head>

<body>

	<div class="da">大一</div>	
	<div class="da">大二</div>	
	<div class="gao">高一</div>	
	<div class="gao">高二</div>	

</body>

结果如下：

三、CSS引入方式

1.外部样式　　通过link标签引入一个外部css文件
2.内部样式(选择器使用)　　head里面加style标签内编写
3.行内样式　直接在body标签行加一个style标签　

优先级(具有就近原则)：行内样式 >ID选择器 > 类选择器 >元素选择器

外部样式举例：

style1.class文件内容(只写style标签里的内容)


.da{   
		color:red;
	}	
			
.gao{	
		 color: yellow;
	}

外部样式.html文件内容(只写style标签里的内容)


<head>
	<meta charset="utf-8">
	<title></title>
	
		//只需要用link标签将其标记到style1.css文件内(也不需要style标签)
		<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

	<div class="da">大一</div> //分类
	<div class="da">大二</div>	
	<div class="gao">高一</div>	
	<div class="gao">高二</div>	
	<div class="gao">高三</div>

</body>

行内样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div  style="color:navajowhite">大一</div>  //这一行更改style标签
		<div >大二</div>
		<div >大三</div>
		<div >高一</div>	
		<div >高二</div>	
	</body>
</html>

结果如下：