文章目录
一,HTML和CSS的练习
–1,效果
–2,HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<!-- link引入一个外部的css文件
rel用来说明文件的类型,href用来指定文件的位置
-->
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<form>
<h1>用户注册</h1>
<div>
<input class="a" type="text" placeholder="用户名" name="user"/>
</div>
<div class="b">
支持中文、字母、数字、“-”、“_”的组合，4-20个字符
</div>
<div>
<input class="a" type="password" placeholder="设置密码" name="pwd"/>
</div>
<div class="b">
建议使用数字、字母和符号两种以上的组合，6-20个字符
</div>
<div>
<input class="a" type="password" placeholder="确认密码" name="repwd"/>
</div>
<div class="b">
两次密码输入不一致
</div>
<div>
<input class="a" type="number" placeholder="验证手机" name="phone"/>
或
<a href="#">验证邮箱</a>
</div>
<div id="c">
<input type="checkbox"/>
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</div>
<div>
<input type="submit" value="立即注册"/>
</div>
</form>
</body>
</html>
–3,css
/* 输入框:宽度 高度 字的颜色 字的大小 */
.a{
width: 350px;
height: 30px;
font-size: 20px;
color: gray;
padding:10px ;
}
/* 提示文字:字的大小 缩进 透明度 */
.b{
font-size: 8px;
/* 内边距,是指内容和盒子边框的距离 */
padding-left:20px;
/* 外边距,是指盒子间的距离 */
margin:10px;
}
/* 按钮:宽度 高度 字的颜色 背景色 */
input[type="submit"]{
width: 370px;
height: 50px;
color: white;
background-color: red;
border-color: red;
font-size: 25px;
}
/* 我已阅读 */
#c{
/* margin: 30px; 上下左同时生效*/
margin-left: 30px;/* 单独设置左边距 */
margin-top: 20px;/* 单独设置上边距 */
margin-bottom: 20px;/* 单独设置下边距 */
}
/* 标题居中 */
h1{
/* text-align: center; */
margin-left: 110px;
}
二,JS
–1,概述
1,全称是javascript,是脚本语言,只能在浏览器中运行.
2,js是一个基于对象和事件驱动的脚本语言.
基于对象:js也能像java一样通过new自定义js对象
事件驱动:js可以让网页动起来,什么时候要触发执行js代码
3,js的特点
直译式: 不需要编译过程
弱类型: js不关心类型
4,js出现位置:
行内JS:
内部JS:
外部JS:
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的用法</title>
<!-- 内部js,使用script标签包裹着js代码 -->
<script>
alert('hello js....')
</script>
</head>
<body>
<!-- 总结:
1,js的位置:行内JS,内部js,外部js
2,事件驱动:通过什么方式来触发JS执行,这种方式就是事件
3,onXXX属性:是HTML提供的一些属性,用来添加js的动态效果
-->
<!-- 鼠标点击事件 -->
<div onclick="alert('欢迎点击div')">我是div1</div>
<!-- 鼠标双击事件 -->
<div ondblclick="alert(100)">我是div2</div>
<!-- 鼠标划入事件 -->
<div onmouseenter="alert(200)">我是div3</div>
<a onmouseenter="alert(300)">我是a</a>
</body>
</html>
三,JS的语法
–1,基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的基础语法</title>
<!--在网页中加入一段js代码 -->
<script>
//3.JS的运算符
//? :
//练习:求两数里的大值
var h = 10;
var i = 20;
var j = h > i ? h : i ;
alert(j);
//&& ||
//1 && 2 ,要求1和2都是true,结果才是true
当1为false时,后面的2倍短路提高了效率
//1 || 2 ,要求1或者2有一个true,结果是true
当1为true时,后面的2倍短路提高了效率
//== != === !==
//===比较类型和值,==只比值
alert(1=='1');//true
alert('1'=='1');//true
alert(1==='1');//false
alert('1'===1);//false
alert(1===1);//true
//+= -=
var count = 1;
count++;
count=count+1;
count+=1;
//% /
alert(5%2);//取余
alert(5/2);//2.5
//++ --
var z = 5;
var c = z+++z;//相当于拿着z++的结果再+z,因为++优先级高
alert(c);//11
var x = 10;
x = ++x;
alert(x);//11
var y = 10;
y = y++;
alert(y);//10
//2.JS的变量:JS是弱类型的语言
//练习:交换变量值
var m = 10;
var n = 5;
var o = n;
n = m;
m = o;
alert(m);
alert(n);
var a = 10;//number
a = 1.1 ;//number
a = true ;//boolean
a = 'javascript' ;//string
alert(a);//javascript
//1.JS的数据类型:number/string/boolean/null/undefined
alert(2.4+3.6);//6,number
//在JS中,字符串可以用'' ""
alert('hello js');//string
alert("hello js");//string
alert(true);//boolean
alert(false);//boolean
alert(null);//null
alert(undefined);//undefined
</script>
</head>
<body>
</body>
</html>
–2,JS的分支语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的语句</title>
<script>
//1.分支结构
//if..else
// 例子: 判断成绩所属的等级
var score = prompt('请在这里输入分数...') ;
if(score>=80 && score<=100){
// alert('优秀');
//输出到浏览器的控制台中
console.log('优秀');
}else if(score>=60 && score<80){
alert('中等')
}else if(score>=0 && score<60){
alert('不及格')
}else{
alert('输入有误')
}
//switch..case --- 了解!!
//判断用户输入的是几,提示今天是星期几...
var day = prompt('请输入星期几');
console.log(typeof day);//typeof查看day的类型,string
switch(day){
case '1':console.log('今天星期一');break;
case "2":console.log('今天星期二');break;
case "3":console.log('今天星期三');break;
case '4':console.log('今天星期四');break;
case '5':console.log('今天星期五');break;
case '6':console.log('今天星期六');break;
case '7':console.log('今天星期日');break;
}
//了解:typeof运算符查看类型
console.log(typeof 123);//number
console.log(typeof "123");//string
console.log(typeof true);//boolean
console.log(typeof 123+"abc");//numberabc
console.log(typeof 123+100);//number100
console.log(typeof (123+100));//number
</script>
</head>
<body>
</body>
</html>
–3,JS的循环语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的语句</title>
<script>
//2.while循环
//练习1:如果你有1个亿,每天花500w,算算能花多少天
let days = 0;//记录天数
let money = 100000000;//记录钱
while(money>0){
money=money-5000000;//花钱
days++;//天数++
}
console.log(days);
//1.for循环
//练习3:打印1~10的里奇数的个数
let count=0;//奇数的个数
for(let i=1;i<=10;i++){
if(i%2 == 1){//过滤奇数
count++;//修改个数
}
}
console.log(count);
//练习2:打印1~10的总和
let sum = 0;//记录总和
for(let i=1;i<=10;i++){
sum = sum + i;//修改总和
}
console.log(sum);
//练习1:打印1~10
// for(var i=1; i<11 ; i++){//问题:变量的作用范围太大,超出范围还能用?????!!
for(let i=1; i<11 ; i++){//定义了有作用域的变量
console.log(i);
}
console.log(i);//var的i可以用(这是错误现象!),let的i会报错(这才是对的现象!)
</script>
</head>
<body>
</body>
</html>
四,JS的数组
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的数组</title>
<script>
//练习2:找出数组里的奇数数据
let m = [1.1,2,3,4,5,"张三"];
for(let i in m){//i是下标
if( m[i] % 2 == 1 ){//奇数
console.log(m[i]);
}
}
//练习1:统计整数数组中,偶数的总和
let x = [1,2,3,4,5,6];
let y = 0;//记录和
for(let i in x){//i是下标
if( x[i] % 2 == 0 ){//偶数
y = y + x[i];
}
}
console.log(y);
//1,定义数组
//方式1:
let a = new Array();//创建数组
console.log(a);//打印数组
console.log(a.length);//获取数组长度
//方式2:
let b = [];//创建数组
console.log(b);
console.log(b.length);
//2,添加数据
let c = new Array(1,1.1,true,"jack",null);
let d = [1,1.1,true,"jack",null];
console.log(c);
console.log(d);
//3,获取数据--根据下标遍历
//i是下标,c[i]是根据下标获取数据,c.length是数组的长度
for(let i = 0; i<c.length ;i++){
console.log(c[i]);
}
//foreach : for(int a : b)//a是数组里的数据,b是数组名
//forin : for(let a in b)//???
for(let i in c){//i是下标
console.log(i);//下标
console.log(c[i]);//下标对应的数据
}
//优势1:js是弱类型的语言,js的数组可以存放各种类型的数据(java里的Object[]也可以)
//优势2:js里的数组长度,随时可以变
c[100]='ok';
console.log(c);//
console.log(c.length);//101
</script>
</head>
<body>
</body>
</html>
4398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
