cgb2108-day09
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2108-day09相关的知识，希望对你有一定的参考价值。
一,作业: 完成用户注册
–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>
以上是关于cgb2108-day09的主要内容，如果未能解决你的问题，请参考以下文章