近期学习笔记
Js笔记
1.可以把<script>放在head中而不必担心影响页面加载速度，方法是在<script>中加上defer=”defer”，如<script defer=”defer” type=”text/javascript” src=”examplae.js”></script>
2.除法中infinity/infinity=NaN，有限大的数值除以无限大的数值结果是有限大的数值，有限大的数值除以0结果是NaN,无穷大值除以有限大值结果是NaN
3.加法，有一个数是NaN则结果是NaN,INFINITY+-INFINITY结果是NaN
4.字符串相加则是拼接
5.减法，infinity-infinity为NaN,-INFINITY--INFINITY=NaN,INFINITY--INFINITY=INFINITY,-INFINITY-INFINITY=NAN
6.数值进行比较时，有一个数是nan，则相等操作符返回false，不等操作符返回true，nan不等于nan，nan等于undefined
7.对象字面量中使用逗号来区分属性，而最后一个属性结束后则不用加任何符号，直接加}，如var person={name:”Nicolas”,age:29};
8.访问对象的属性方法有两种，一种是person.name,另一种是person[“name”]
9.练习一：
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head><title>js练习</title></head>
<body>
<script>
function displayInfo(args){
var output="";
if(typeof args.name=="string")
output+="Name:"+args.name;
if(typeof args.age=="number")
output+=", age:"+args.age;
alert(output);
}
displayInfo({name:"abracadabra",age:18});
displayInfo({name:"nicolas"});
</script>
</body>
</html>
10.练习二（升值排序）：
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head><title>js练习</title></head>
<body>
<script>
function compare(a,b){
return a-b;
}
var number=[78,13,4,3,5];
number.sort(compare);
alert(number);
</script>
</body>
</html>
11.数组中slice(num1,num2),num1是分割开始的地方，num2-1是数组分割结束的地方，若num1/num2是负数，则用数组长度length加上该负数得到起始结束的地方，若num2小于num1，则返回空数组
12.数组中的splice用法，splice(arg1,arg2,arg3,arg4)中第一个参数是指要修改的元素位置，第二个参数是指要删除多少个元素，第三个参数开始直到最后一个参数都是要加进该数组的元素内容，splice可用来增减数组元素
13.indexOf(arg1,arg2),arg1不可省略，arg2可省略，两个参数都存在的时候是指从arg2的位置开始向后搜索arg1，lastIndexOf(arg1,arg2)指从arg2开始向前搜索arg1
14.练习三（every得每一个元素都满足条件才能返回真，some只要一个袁术满足条件就返回真的代码验证）：
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head><title>js练习</title></head>
<body>
<script>
var number=[1,2,3,4,5,6,7];
var result=number.every(function(item,index,array){
return item>2;
});
var result1=number.some(function(item,index,array){
return item>2;
});
alert("result is "+result);
alert("result1 is "+result1);
</script>
</body>
</html>
15.Math.ceil()向上取整，Math.floor()向下取整,Math.round()四舍五入
16.练习四（运用对象思想计算一本书的版本）
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<script>
var book={_yaer:2004,edition:1};
Object.defineProperty(book,"year",{
get:function(){
return this._year;
},
set:function(newValue){
if(newValue>2004){
this._year=newValue;
this.edition=newValue-2004+1;}
}
})
book.year=2015;
alert(book.edition);
</script>
</body>
</html>
17.js的模式：
工厂模式
代码示例：
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<script>
function createPerson(name,age,sex){
var o=new Object();
o.name=name;
o.age=age;
o.sex=sex;
alert(o.name);
}
createPerson("Abracadabra",21,"woman");
createPerson("John",21,"man");
</script>
</body>
</html>
构造函数模式
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<script>
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
alert(this.name);
}
person("Abracadabra",21,"woman");
person("John",21,"man");
</script>
</body>
</html>
18.<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<script>
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
var person1=new person("Abracadabra",21,"woman");
var person2=new person("John",21,"man");
alert(person1.constructor==person);
alert(person2 instanceof Object);
</script>
</body>
</html>
Constructor:某个对象.constructor是指他的对象类型
19.练习
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<script>
function personName(name){
this.getName=function(){
return name;
};
this.setName=function(value){
name=value;
};
}
var name1=new personName("Abracadabra");
alert(name1.getName());
name1.setName("john");
alert(name1.getName());
</script>
</body>
</html>
Html5笔记
1.mark标签可以使得文本高亮
2.验证邮箱格式
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<form id="check" onsubmit="return check()">
<input type=email name="email" id="email">
<input type="submit">
</form>
<script>
function check(){
var email=document.getElementById("email");
if(email.value=="")
{alert("please enter email");}
else if (!email.checkValidity())
alert("please enter the right email");
else
{alert("enter the right one");}
}
</script>
</body>
</html>
3.进度条
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>版本数计算</title>
</head>
<body>
<p>磁盘使用率<meter min="0" max="100" value="90"></meter>GB</p>
</body>
</html>
除了IE都支持，在IE上要用的话就加上
3.图片自适应
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<head>
<title>自适应</title>
<style>
img{
display:flex;
height:300px;
width:50%;
}
</style>
<body>
<img src="./image/images.jpg">
</body>
</html>
4.一个小图标
|
|
<!DOCCTYPE HTML> |
|
|
<html> |
|
|
<head> |
|
|
<style> |
|
|
.triangle,.word{float:left;} |
|
|
.triangle{ |
|
|
width:20px;height:20px;transform:rotate(45deg); |
|
|
} |
|
|
.word{margin-left:-14px;margin-top:-5px;width:100px;height:30px;border-radius:7px;padding-left:18px;color:#fff;} |
|
|
.int{margin-top:4px;} |
|
|
</style> |
|
|
</head> |
|
|
<div class="icon"> |
|
|
<div class="triangle"></div> |
|
|
<div class="word"><div class="int"><input type="radio">Hexo</div></div> |
|
|
</div> |
|
|
</html> |
|
|
|
text-overflow:ellipsis指对象内文本溢出时显示省略符；
text-overflow:clip指对象内文本溢出时不显示省略符直接将多余的部分裁剪掉
网页设计中重绘指的是像background-color、border-color这种属性的改变，而重排是指margin、padding的数值改变、
缩进用text-indent:2em没有作用是因为元素不是块级元素，给该元素添加浮动使其变为块级元素就会有用了
