cgb2108-day09

cgblpx

已于 2022-02-09 09:24:59 修改

阅读量2.6k

点赞数 1

分类专栏： cgb2108班的笔记文章标签： java

于 2021-10-12 14:03:01 首次发布

本文链接：https://blog.csdn.net/u012932876/article/details/120722209

版权

cgb2108班的笔记专栏收录该内容

19 篇文章 33 订阅

订阅专栏

文章目录

一,作业: 完成用户注册

在这里插入图片描述

–1,创建css文件,写css

/* 修饰输入框 */
.a{
	width: 300px;/* 宽度 */
	height: 30px;/* 高度 */
	font-size: 20px;/* 字号 */
	padding: 15px;/* 内边距padding */
}
/* 修饰文字说明 */
.b{
	text-indent: 20px;/* 首行缩进 */
	font-size: 8px;/* 字号 */
	color: gray;/* 颜色 */
}
/* 修饰我已阅读 */
#note{
	padding-left: 20px;/* 内边距-左边距 */
}
/* 修饰注入按钮 */
input[type='submit']{
	text-align: center;/* 居中 */
	width: 330px;/* 宽度 */
	height: 50px;/* 高度 */
	font-size: 20px;/* 字号 */
	background-color: orangered;/* 背景色 */
	border-color: orangered;/* 边框颜色 */
	color: white;/* 字的颜色 */
}
/* 修饰用户注册 */
h3{
	margin-left: 130px;/* 左边距 */
}

–2,创建HTML文件,引入css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 用户注册</title>
		
		<!-- 在HTML网页中引入css代码 -->
		<link rel="stylesheet" href="2.css" />
	</head>
	<body>
		<!--只有form标签才能提交数据:必须用form+必须有submit+必须设置name属性
			method属性用来设置数据提交方式(get/post,默认是get)
			action属性用来设置数据将要交给哪个java程序来处理
		-->
		<form method="post" action="#">
			<h3>用户注册</h3>
			<table>
				<tr>
					<td>
						<input class="a" type="text" placeholder="用户名" name="user"/>
					</td>
				</tr>
				<tr>
					<td class="b" > 支持中文、字母、数字、“-”、“_”的组合，4-20个字符 </td>
				</tr>
				<tr>
					<td>
						<input class="a"  type="password" placeholder="设置密码" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td class="b" > 建议使用数字、字母和符号两种以上的组合，6-20个字符 </td>
				</tr>
				<tr>
					<td>
						<input class="a"  type="password" placeholder="确认密码" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td class="b" > 两次密码输入不一致 </td>
				</tr>
				<tr>
					<td>
						<input class="a"  type="text" placeholder="验证手机" name="phone"/> 
						或
						<a href="#">验证邮箱</a>
					</td>
				</tr>
				<tr>
					<td id="note">
						<input type="checkbox" /> 
						我已阅读并同意
						<a href="#">京淘用户注册协议</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="立即注册"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

二,JS

–1,概述

全称是javascript,是java脚本语言.用来增强网页的交互性.
JS是基于对象和事件驱动的脚本语言
基于对象: js和java一样,可以创建对象并使用对象.
事件驱动: js代码必须想办法触发才会执行,常见事件: 单击/双击/鼠标划入划出…
脚本语言: js的运行必须在浏览器里
JS特点: 直译式,弱类型的语言. 跨平台(浏览器),一定的安全性

–2,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js</title>
		<!-- JS出现的位置: 行内JS + 内部JS + 外部JS -->
		
		<!-- 在网页中添加js代码 -->
		<script>
			alert('您路过了div元素')
		</script>
	</head>
	<body>
		<!-- 单击div时弹出提示 -->
		<div onclick="alert('您路过了div元素')">我是div</div>
		
		<!-- 双击a时弹出提示 -->
		<a ondblclick="alert('您路过了div元素')">我是a</a>
		
		<!-- 鼠标划入span1时弹出提示 -->
		<span onmouseenter="alert('您路过了div元素')">我是span1</span>
		
		<!-- 鼠标划出span2时弹出提示 -->
		<span onmouseout="alert('您路过了div元素')">我是span2</span>
		
	</body>
</html>

–3,JS 语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的语法</title>

		<!-- 表明JS代码的开始位置和结束位置 -->
		<script>
			//3,JS的运算符:
				alert(5/2);//2.5
				//自增自减:
				var e = 10;
				alert(e++);//10,符号在后面,先使用再自增
				alert(++e);//12,符号在前面,先自增再使用
				//比较运算符: == !=  === !== 
				alert(1==1);//true
				alert(1===1);//true
				
				alert(1=='1');//true,只比值
				alert(1==='1');//false,比值和数据类型
				
				alert(1!='1');//false
				alert(1!=='1');//true
			//2,JS的变量:弱类型的语言,语法类似于java
				var a = 10; //number
				a = 1.6;//number
				a = true;//boolean
				a = 'hello'; //string
				alert(a);//hello
				//练习:交换变量的值
				var b = 1;
				var c = 2;
				var d = b;
				    b = c;
				    c = d;
				alert(b+","+c);
			//1,JS的数据类型:number/string/boolean/null/undefined
				alert(100);
				alert(1.6);
				alert(1.6+3.4);//5,js是弱类型
				alert('hello');
				alert("hello");
				alert(true);
				alert(false);
				alert(null);
				
				var count=10;
				alert(count);
			
		</script>
	</head>
	<body>
	</body>
</html>

–4,JS语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js语句</title>
	</head>
	<body>
		<!-- 表明JS代码的开始位置和结束位置 -->
		<script>
			//2.分支结构: switch...case
				var day = 1;
				switch(day){//java里只支持整数类型的表达式byte short int char String
					case 1:alert('今天是星期一');break;
					case 2:alert('今天是星期二');break;
					case 3:alert('今天是星期三');break;
					case 4:alert('今天是星期四');break;
					case 5:alert('今天是星期五');break;
				}
			
			//1.分支结构: if...else
				if(1==='1'){//false
					alert('ok');
				}else{
					alert('no ok');
				}
				// 例子: 接收用户输入的成绩，判断成绩所属的等级
				// 80~100(包括80，也包括100)		优秀 
				// 60~80(包括60，但不包括80)		中等
				// 0~60(包括0，但不包括60)		不及格
				var a = prompt('请输入分数:');
				if(a>=80 && a<=100){
					alert('优秀');
				}else if(a>=60 && a<80){
					alert('中等');
				}else if(a>=0 && a<60){
					alert('不及格');
				}else{
					alert('数据有误');
				}
				
		</script>
	</body>
</html>