cgb2108-day09

文章目录

    • 一,作业: 完成用户注册
      • --1,创建css文件,写css
      • --2,创建HTML文件,引入css
    • 二,JS
      • --1,概述
      • --2,入门案例
      • --3,JS 语法
      • --4,JS语句

一,作业: 完成用户注册

cgb2108-day09_第1张图片

–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>
		
		
		<link rel="stylesheet" href="2.css" />
	head>
	<body>
		
		<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>测试 jstitle>
		
		
		
		<script>
			alert('您路过了div元素')
		script>
	head>
	<body>
		
		<div onclick="alert('您路过了div元素')">我是divdiv>
		
		
		<a ondblclick="alert('您路过了div元素')">我是aa>
		
		
		<span onmouseenter="alert('您路过了div元素')">我是span1span>
		
		
		<span onmouseout="alert('您路过了div元素')">我是span2span>
		
	body>
html>

–3,JS 语法

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

		
		<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>
		
		<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班的笔记,java)