测试开发笔记-web前端

Web前端笔记（四）

• 盒模型
  div：块级元素，独占一排
  {
  margin：外边距，决定元素自己的位置
  margin：0 auto；居中（div居中一般使用这种）
  float：浮动
  两个box同时浮动，则并排不覆盖

.box1{
		float:right;
	}
	.box2{
		float:right;
	}
}

div每一级都需要设置宽高
border-radius:25px; 25为圆的半径
使用div做出一个圆

<style>
	.yuan{
		width:20px;
		height:20px;
		background-color:black;
		border-radius:50%;
	}
</style>
<div class="yuan"></div>

当文字在div中不居中时：

{
		text-align:center;
		line-height:与div高相同
}

• JavaScript
  js是一门编程语言
  大多数编程语言都支持一些基础特性，比如变量、控制结构（if、for）所以学一门语言相当于打开了所有编程语言的大门
  1、响应鼠标的点击、悬停等动作并实现相应的功能。
  2、实现酷炫的动画效果
  3、提交数据和获取服务器传过来的数据。
  4、简单示例

<script>
	function myfun(){
		document.getElementById('pid').innerHTML='周六就要考试了';
	}
</script>
<p id="pid">这是一个段落</p>
<button type="button" onclick="myfun()">修改</button>

• 核心语法
  1、输入输出

<script>
	document.write('欢迎进入我的世界');
			//输出,括号里是输出内容,要引号
	window.alert('这是一个弹窗');
	var age=prompt('请输入你的年龄：');//输入的内容是string
	document.write('年龄是：'+age);
	//JS中"//单行注释";"/* */多行注释"
</script>

2、变量

<script>
	/*变量:保存数据的容器,
		命名规则:
			大小写字母开头,数字在中间或结尾
			也可以下划线和$开头,不建议用
			变量命不能用关键字(js本身已经用,具有特殊含义的单词),保留字(占着不让用)
			区分大小写*/
	var y=5;
	document.write(y);
	var y="liming";
	document.write(y);//变量旧的会清除
</script>

输出结果：5liming
3、数据类型

<script>
	//数字、字符串、数组
	//数组可以存放多个数据，不分类型
	//具有下标从0开始
	var names=['li','zhou','wang',56];//数组
	document.write(names[3]);//结果：56
	
	var name_age={username:'ww',age:12};//对象，字典
	document.write(name_age['age'])//结果：12	
</script>

4、运算符号

<script>
	//+-*/%
	var name=prompt('请输入您的名字：');
	var age=prompt('请输入您的年龄：');
	var b=Number(age)+1;
	document.write('姓名为：'+name+'年龄为：'+b);
	//==、===、!=、!==
	var a=prompt("");
	if(a==40){
		document.write('nishizhu');
	}
	//==:只看值；===:值与数据类型
	  !=:只看值；!==:值与数据类型
	
</script>

5、条件语句

<script>
//if语句
	var a=78;
	if(a>=80){
		document.write("youxiu");
	}else if(a>=60){
		document.write("jige");
	}else{
		document.write("bujige");
	}//结：jige
	

//switch语句	
	var a=prompt("chengji:");
	switch(Number(a))//数据类型要保持一致
		{
			case 80:
				document.write("youxiu");
				break;
			case 60:
				document.write("jige");
				break;
			default:
				document.write("sha");
				break;
			}//输:60 结:jige

//for语句
	var a=12
	for(var i=0;i<4;i++){
		document.write('循环：'+i+'<br />');
		a--;
	}
	document.write(a);//结果:循环：0循环：1循环：2循环：8			
</script>

++a是先自增后执行
a++是先执行后自增