新增标签：
头部：
<header>用在页面的头部</header>
底部：
<footer>用在页面的底部</footer>
导航：
<nav> <a href="">fhdshfk</a> <a href="">fhdshfk</a> <a href="">fhdshfk</a> <a href="">fhdshfk</a> <a href="">fhdshfk</a> </nav>
标题组合：
<hgroup> <h1>青叶软件</h1> <h2>移动互联网解决方案</h2> </hgroup>
section：
<section> 用于划分页面上不同区域或者划分文章里的不同的节。 </section>
article：
<article>表示页面上结构完整且独立的一部分，用来呈现论坛的一个帖子之类的。</article>
aside：
<aside>包含与当前应用相关的引用、侧边栏、广告、nav元素组以及其他类似的，有别于主要内容的部分</aside>
媒体元素组合figure和figcaption：
<figure> <img src="img/14.jpg" alt="1"> <figcaption>风景不错</figcaption> </figure>
事件time：
<time datetime="2011-01-12">January 12th, 2011</time>
提示化输入框datalist（想要与input一起使用）：
<input type="text" list="valList" name="" value="" placeholder=""> <datalist id="valList"> <option value="javascript">javascript</option> <option value="css">css</option> <option value="html">html</option> </datalist>
文档中的细节details和summary：(加了open默认是打开的）
<details open> <summary>title or explanatory caption</summary> <p>这是内容</p> </details>
对话dialog：
<dialog></dialog>
定义作者信息：address，没啥用其实。
<address></address>
标记mark：背景默认黄色
<mark>nihao a </mark>
公钥：keygen：
<form action="http://www.baidu.com" method="get" accept-charset="utf-8"> 用户：<input type="text" name="username" value="" placeholder=""> 公钥：<keygen keytype="rsa"></keygen>%0 <input type="submit" value="submit"> </form>
进度条progress：
<progress value="76" max="100"></progress>
表单新增属性：
<input type="email" name="" value="提交">：强制用户输入带@才可以提交，否则提示
<input type="tel" name="" value="提交">：在移动端输入，则会默认出现数字键盘，PC端无变化。
<input type="url" name="" value="提交">：必须输入网址类型
<input type="search" name="" value="提交">：输入内容的时候，后面多了个X号，点击能全部取消。
<input type="range" step="2" min="0" max="10">：步长为2的拉动的格子
<input type="number" name="" value="" placeholder="dsa">：只能输入数字
<input type="color" name="" value="" placeholder="">：用户能够选择颜色。
<input type="datetime" name="" value="" placeholder="">：显示完整日期
<input type="datetime-local" name="" value="" placeholder="">：显示完整日期，不含时期
<input type="time" name="" value="" placeholder="">：显示时间
<input type="date" name="" value="" placeholder="">：显示日期
<input type="week" name="" value="" placeholder="">：显示周
<input type="month" name="" value="" placeholder="">：显示月
placeholder：输入框提示信息
autocomplete：是否保存之前用户的输入值，默认on，关闭填off
autofocus：默认焦点在设置这个属性的input上，直接写，无需设置等于什么
required：必填
pattern：正则校验 pattern="\d(1,5)"
<form action="http://www.baidu.com" method="get" accept-charset="utf-8"> <input type="text" name="" value="" placeholder="请输入1-5位数字" pattern="\d{1,5}"> <input type="submit" name="" value="提交"/> </form>
formaction：自定义提交表单的位置。举例如下：
<form action="http://www.baidu.com" method="get" accept-charset="utf-8"> <input type="text" name="" value="" placeholder="请输入1-5位数字" pattern="\d{1,5}"> <input type="submit" name="" value="提交"/> <input type="submit" name="" value="保存至草稿纸" formaction="http://www.miaov.com" /> </form>
表单验证方法：
新的选择器：
querySelector：本方法只能选择一组中的第一个元素
querySelectAll：选择组元素（含class元素）
getElementsByClassName：选择class元素。
关于querySelector、querySelectAll、getElementsByClassName的使用举例：
以下例子非常重要，你再也不用什么document.getElementByXXX了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oDiv1 = document.querySelector('#div1'); var oDiv2 = document.querySelector('.div2'); var oDiv3 = document.querySelector('[title = div3]'); var oDiv4 = document.querySelectorAll('.all'); var oDiv5 = document.getElementsByClassName('a'); oDiv1.style.background = 'red'; oDiv2.style.background = 'yellow'; oDiv3.style.background = 'green'; // oDiv4是数组，所以需要循环。 for (var i = 0; i < oDiv4.length; i++) { oDiv4[i].style.background = '#aaa'; } for (var i = 0; i < oDiv5.length; i++) { oDiv5[i].style.background = '#0a4'; } } </script> </head> <body> <div id="div1">ds</div> <div class="div2">ds</div> <div title="div3">div3</div> <div class="all">div4</div> <div class="all">div5</div> <div class="a">div6</div> <div class="a">div7</div> </body> </html>
obj.classList：某对象下的数组，所以有以下属性：
——length：class的长度
——add()：添加class方法
——remove()：删除class方法
——toggle()：切换class方法（如果原先有，就删除，如果没有就添加。如toggle('box5')）
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>classList</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.querySelector('#div1'); alert(oDiv.classList); //box box1 box2 alert(oDiv.classList.length); //3 } </script> </head> <body> <div id="div1" class="box box1 box2">div1</div> </body> </html>
JSON.parse()：把字符串转成json。————字符串中的属性要严格加上引号。
JSON.stringify()：把json转成字符串。————会自动把双引号加上。
eval与parse的区别：eval可以解析任何字符串变成JS，parse只能解析JSON形式的字符串变成JS，所以JSON.parse()的安全性比较高。
<script type="text/javascript"> var str = 'function show(){alert(2)}'; eval(str); show(); //2 var str2 = '{"name":"hello"}'; var json = JSON.parse(str2); //请注意：上面的str不满足json的格式，是不能用这个方法的。 alert(json.name); //hello var json1 = {"name":"hello"}; var str3 = JSON.stringify(json1); alert(str3); </script>
————以上的2个方法ie7以下是不兼容的，如何做到兼容呢？www.json.org去下载json2.js，官网上位置截图如下：
data-属性名：这个能够自定义属性名，JS中能通过obj.dataset.属性名，获取得到属性的值。
<head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.querySelector('#div1'); alert(oDiv.dataset.miaov); //自定义属性 alert(oDiv.dataset.miaovAll); //妙味课堂 } </script> </head> <body> <div id="div1" data-miaov="自定义属性" data-miaov-all="妙味课堂"></div> </body>
defer：延迟加载，用于引入的js文件。
asycn：异步加载，用于引入的文件，相当于页面和js文件一起加载的。（默认情况下是先加载引入的js文件，再加载页面的。）
draggable：设置为true，元素就可以拖拽了。参考邮件的拖拽上传。请注意以下事件，既然是事件，就得触发的时候生效。
————火狐下有兼容，解决方法以后再说。
canvas：网页中的绘图。默认高300px，高150px。设置画布宽高一定要在标签里面设置，并且不用用style，直接用属性。
oC.getContext('2d')：设置绘制环境。
绘制方块：
——fillRect(L,T,W,H)：填充的方块，默认颜色是黑色。
——strokeRect(L,T,W,H)：带边框的方块。
——fillStyle：填充颜色（绘制canvas是有顺序的。）
——lineWidth：线宽度，是一个数值。
——strokeStyle：边线颜色。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{background: #000;} #c1{background: #fff;} </style> <script type="text/javascript"> window.onload = function(){ var oC = document.querySelector('#c1'); // 绘制环境。 var oGc = oC.getContext('2d'); //webgl可以实现3d绘图 /*oGc.fillStyle = 'red'; oGc.fillRect(50,50,100,100);*/ oGc.strokeStyle = 'yellow'; oGc.strokeRect(50.5,50.5,100,100); //50.5是为了边框确实是1px } </script> </head> <body> <!-- 一定要在标签上设置宽高 --> <canvas id="c1" width='400px' height="400px"> </canvas> </body> </html>
方块还可以设置以下的属性，
方块移动代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0,0,100,100); setInterval(function(){ num++; oGC.clearRect(0,0,oC.width,oC.height); oGC.fillRect(num,num,100,100); },30); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认：宽300 高150--> </body> </html>
绘制一个圆：
arc(x, y, radius, startAngle, endAngle, counterclockwise)
arc（x坐标，y坐标，半径，起始弧度，结束弧度，旋转方向）
弧度与角度的关系：弧度=角度*Math.PI/180
例子：最简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body{background: #000;}
#div1{background: #fff;width: 500px;height: 500px;margin: 20px auto;}
</style>
<script type="text/javascript">
window.onload = function(){
var i = 0;
var oC = document.querySelector('#c1');
var oGc = oC.getContext('2d');
setInterval(function(){
oGc.beginPath();
oGc.arc(i++,i++,20,0,360*Math.PI/180,false);
oGc.stroke();
},30)
}
</script>
</head>
<body>
<div id="div1">
<canvas id="c1" width="400px" height="400px;">
</canvas>
</div>
</body>
</html>
——————在出现定时器的时候，需要使用clearRect(0,0,oC.width,oC.height);把整个画布清空。不然每画一次的画布和画的图都在重叠。
例子：用arc去画一个钟表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画钟表</title>
<style type="text/css">
body{background: #000;}
#c1{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.querySelector('#c1');
var oGc = oC.getContext('2d');
function toDraw(){
var x = 200;
var y = 200;
var r = 150;
oGc.clearRect(0,0,oC.width,oC.height);
// 获取本地时间
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
// -90是因为真实表盘的针是从顶部开始的，相当于倒回去90度。
var oHoursValue = (-90+oHours*30+oMin/2)*Math.PI/180;
var oMinValue = (-90+oMin*6+(oSec/10))*Math.PI/180;
var oSecValue = (-90+oSec*6)*Math.PI/180;
/*oGc.moveTo(x,y);
oGc.arc(x,y,r,0,6*Math.PI/180,false);
oGc.moveTo(x,y);
oGc.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);
oGc.closePath();
oGc.stroke();*/
// 通过循环画出60个刻度，相当于秒，并且每个小刻度都指向圆心。
oGc.beginPath();
for (var i = 0; i < 60; i++) {
oGc.moveTo(x,y);
oGc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGc.closePath();
oGc.stroke();
// 在圆中间弄出一个圆盘盖住，相当于只保留了外延的刻度。
oGc.fillStyle = '#fff';
oGc.beginPath();
oGc.moveTo(x,y);
// 设置半径为原先的0.95倍。
oGc.arc(x,y,r*0.95,0,360*Math.PI/180,false);
oGc.closePath();
oGc.fill();
// 画12个分针刻度。
oGc.lineWidth = 3;
oGc.beginPath();
for (var i = 0; i < 12; i++) {
oGc.moveTo(x,y);
oGc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGc.closePath();
oGc.stroke();
// 再盖一个表盘。
oGc.fillStyle = '#fff';
oGc.beginPath();
oGc.moveTo(x,y);
// 设置半径为原先的0.9倍。
oGc.arc(x,y,r*0.9,0,360*Math.PI/180,false);
oGc.closePath();
oGc.fill();
// 画时针
oGc.lineWidth = 5;
oGc.beginPath();
oGc.moveTo(x,y);
// 起始位置和终止位置都为0，相当于一个点，closePath就变成了线。
oGc.arc(x,y,r*0.5,oHoursValue,oHoursValue,false);
oGc.closePath();
oGc.stroke();
// 画分针
oGc.lineWidth = 3;
oGc.beginPath();
oGc.moveTo(x,y);
// 起始位置和终止位置都为0，相当于一个点，closePath就变成了线。
oGc.arc(x,y,r*0.7,oMinValue,oMinValue,false);
oGc.closePath();
oGc.stroke();
// 画秒针
oGc.lineWidth = 1;
oGc.beginPath();
oGc.moveTo(x,y);
// 起始位置和终止位置都为0，相当于一个点，closePath就变成了线。
oGc.arc(x,y,r*0.95,oSecValue,oSecValue,false);
oGc.closePath();
oGc.stroke();
}
setInterval(toDraw,1000);
toDraw();
}
</script>
</head>
<body>
<canvas id="c1" width="400px" height="400px;">
</canvas>
</body>
</html>
arcTo(150,20,150,70,50)：创建弧度（此圆弧与当前点到（x1,y1）的连线相切，而且（x1,y1）到（x2,y2）的连线也相切）
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画圆</title>
<style type="text/css">
body{background: #000;}
#c1{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.querySelector('#c1');
var oGc = oC.getContext('2d');
oGc.moveTo(20,20);
oGc.lineTo(100,20);
oGc.arcTo(150,20,150,70,50);//x1,y1,x2,y2,r
oGc.lineTo(150,120);
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="c1" width="400px" height="400px;">
</canvas>
</body>
</html>
quadraticCurveTo(x1,y1,x2,y2)：创建二次贝塞尔曲线
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)：创建三次贝塞尔曲线
更多关于canvas的参考手册请参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp
旋转的方块代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; var num2 = 0; var value = 1; setInterval(function(){ num++; oGC.save(); oGC.clearRect(0,0,oC.width,oC.height); oGC.translate(100,100); if(num2 == 100){ value = -1; } else if(num2 == 0){ value = 1; } num2 += value; oGC.scale( num2*1/50,num2*1/50 ); oGC.rotate(num*Math.PI/180); oGC.translate(-50,-50); oGC.fillRect(0,0,100,100); oGC.restore(); },30); }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
简易版祖玛小游戏代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var i = 0;
var yImg = new Image();
yImg.src = 'person.png';
yImg.onload = function(){
setInterval(function(){
oGC.clearRect(0,0,oC.width,oC.height);
oGC.beginPath();
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
oGC.stroke();
oGC.beginPath();
oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
oGC.stroke();
oGC.beginPath();
oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
oGC.stroke();
for(var i=0;i<ball.length;i++){
oGC.beginPath();
oGC.moveTo(ball[i].x,ball[i].y);
oGC.arc(ball[i].x,ball[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
oGC.fill();
}
oGC.save();
oGC.translate(300,200);
oGC.rotate(iRotate);
oGC.translate(-40,-40);
oGC.drawImage(yImg,0,0);
oGC.restore();
for(var i=0;i<bullet.length;i++){
oGC.save();
oGC.fillStyle = 'red';
oGC.beginPath();
oGC.moveTo(bullet[i].x,bullet[i].y);
oGC.arc(bullet[i].x,bullet[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
oGC.fill();
oGC.restore();
}
oGC.save();
oGC.font = '60px impact';
oGC.textBaseline = 'top';
oGC.fillStyle = 'red';
oGC.shadowOffsetX = 10;
oGC.shadowOffsetY = 10;
oGC.shadowColor = 'green';
oGC.shadowBlur = 5;
var w = oGC.measureText('简易祖玛').width;
var h = 60;
oGC.fillText('简易祖玛', (oC.width - w)/2 , 450 );
oGC.restore();
},1000/60);
setInterval(function(){
for(var i=0;i<ball.length;i++){
ball[i].num++;
if( ball[i].num == 270 ){
ball[i].r = 150;
ball[i].startX = 250;
ball[i].startY = 50;
}
if( ball[i].num == 270 + 180 ){
alert('游戏结束');
window.location.reload();
}
ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;
}
for(var i=0;i<bullet.length;i++){
bullet[i].x = bullet[i].x + bullet[i].sX;
bullet[i].y = bullet[i].y + bullet[i].sY;
}
for(var i=0;i<bullet.length;i++){
for(var j=0;j<ball.length;j++){
if( pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y) ){
bullet.splice(i,1);
ball.splice(j,1);
break;
}
}
}
},30);
var ball = [];
setInterval(function(){
ball.push({
x : 300,
y : 0,
r : 200,
num : 0,
startX : 300,
startY : 0
});
},350);
var iRotate = 0;
oC.onmousemove = function(ev){
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
if(a>0 && b>0){
iRotate = Math.asin(b/c) + 90*Math.PI/180;
}
else if(a>0){
iRotate = Math.asin(a/c);
}
if(a<0 && b>0){
iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
}
else if(a<0){
iRotate = Math.asin(a/c);
}
};
var bullet = [];
oC.onmousedown = function(ev){
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
var speed = 5;
var sX = speed * a/c;
var sY = speed * b/c;
bullet.push({
x : 300,
y : 200,
sX : sX,
sY : sY
});
};
};
function pz(x1,y1,x2,y2){
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt(a*a + b*b);
if(c < 40){
return true;
}
else{
return false;
}
}
};
</script>
</head>
<body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>
<ifram></ifram>：窗口之间的访问。
举例：如何操作引入的ifram下的页面的dom元素：采用oMyIfram.contentWindow，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.querySelector('#btn1');
var oMyIfram = document.querySelector('#myifram');
oBtn.onclick = function(){
// 操作ifram下的dom元素，需要先获得引入页面下的window。使用以下方法。
oMyIfram.contentWindow.document.body.style.background = '#f00'
}
}
</script>
</head>
<body>
<input type="button" id="btn1" name="" value="改变颜色">
<iframe id="myifram" src="12ifram.html"></iframe>
<iframe id="myifram" src="https://www.baidu.com"></iframe>
</body>
</html>
————在JS中采用window.open()方法，也可以同时操作新窗口的DOM元素。
————请注意：以上的是同一个域名下操作不同窗口的，是可以的，但是在不同域名下（即跨域），是无法操作的。也就是你的权限限制在了oMyIfram.contentWindow，之下的document以及之下的权限是没有的。那么这个时候就可以用postMessage去操作，这时候相当于是把信息传了过去，然后对方接受并进行操作。
以下供参考：
ajax部分：
————————————————这是占位的。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
