html5简单代码,html5常用
找一点html5写的源代码案例，供初学者学习
首先准备好11张图片，放到img文件夹下供调用
成都创新互联是一家专注于成都网站建设、网站设计与策划设计,罗庄网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:罗庄等地区。罗庄做网站价格咨询:13518219792
代码如下：
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
/head
body
p/p
img src="img/0.JPG" /
img src="img/0.JPG" /
img src="img/colon.JPG" /
img src="img/0.JPG" /
img src="img/0.JPG" /
img src="img/colon.JPG" /
img src="img/0.JPG" /
img src="img/0.JPG" /
script
//var oBody=document.body;
var oP=document.getElementsByTagName("p")[0];
var aImg=document.getElementsByTagName("img");
fn();
setInterval(fn,1000)
function fn(){
var mytime=new Date(); //当前的系统时间 年月日 时分秒 星期 对象
var iHour=mytime.getHours();//小时
var iMin=mytime.getMinutes();//分钟
var iSen=mytime.getSeconds() ;//秒钟
var str="";
//220640
str=toZero(iHour)+":"+toZero(iMin)+":"+toZero(iSen);
oP.innerHTML=str;
for(var i=0;iaImg.length;i++){
if(str.charAt(i)==":"){
aImg[i].src="img/colon.JPG";
}else{
aImg[i].src="img/"+str.charAt(i)+".JPG";
}
}
}
function toZero(n){
if(n10){
return n="0"+n;
}else{
return n=""+n;
}
}
/script
/body
/html
html5 canvas 代码 求最简单的动画效果 一个圆在左边移动到右边
代码如下：
!DOCTYPE html
html
body
canvas id="myCanvas" width="700" height="550" style="border:1px solid #d3d3d3;"
Your browser does not support the HTML5 canvas tag.
/canvas
script
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 0;
var ss = setInterval(function(){
ctx.clearRect(0,0,700,550);
//ctx.translate(x,0);
ctx.beginPath();
ctx.arc(x,200,50,0,Math.PI*2,true);
ctx.stroke();
//ctx.fillRect(x,10,100,50);
if (x 700 ) {
clearInterval(ss);
}
x += 20;
},100);
/script
/body
/html
试试看，只是简单一个demo，效果图如下：
求html5代码
这个是基础的表格，你可以去研究改一下就可以了。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
title表格/title
/head
body
table border="2" cellpadding="12"
tr
td colspan="3"商品类目/td
/tr
tr
td rowspan="3"虚拟/td
td移动/td
td联通/td
/tr
tr
td充值卡/td
td彩票/td
/tr
tr
td梦幻/td
tdQQ/td
/tr
tr
td rowspan="3"护肤/td
td美容护肤/td
td美体/td
/tr
tr
td彩妆/td
td香水/td
/tr
tr
td个人护理/td
td保健/td
/tr
/table
/body
/html
用HTML5设计简单动画代码
!DOCTYPE html
html
head
meta charset="UTF-8"
titleanimation/title
style
#box {
height: 200px;
width: 200px;
background-color: aqua;
position: absolute;
left:0;
margin-top:50px;
}
input {
width: 100px;
height: 30px;
}
/style
/head
body
div id="box"/div
input type="button" value="前进"
script
var box = document.getElementById('box');
var bt = document.getElementsByTagName('input');
var timer = null;
bt[0].onclick = function () {
ani(box,600);
}
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) = Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
/script
/body
/html
如何写html5代码调用打开本机的摄像头
先简单的添加需要的控件
video id="video" autoplay=""style='width:640px;height:480px'/video
button id='picture'PICTURE/button
canvas id="canvas" width="640" height="480"/canvas
并在script中定义
var video = document.getElementById("video");
var context = canvas.getContext("2d")
var errocb = function () {
console.log('sth wrong!');
}
然后，简单的说就是利用html5的api navigator.getUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示
if (navigator.getUserMedia) { // 标准的API
navigator.getUserMedia({ "video": true }, function (stream) {
video.src = stream;
video.play();
}, errocb);
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
navigator.webkitGetUserMedia({ "video": true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errocb);
}
网上有些例子中，navigator.getUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj
还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
但要注意，他们绑定video.src的方法不一样，本人没有测过createObjectURL是否通用
拍照功能就是简单的调用canvas中的drawImage即可
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
所有script代码如图示
然后浏览器中就能看到摄像头，点击picture，就会在把当前摄像头的图片就会出现在右边了
HTML5的代码标准格式是什么
你想问的应该是，在搭建一个HTML文件时，基本的文件结构是什么样子吧？
标准的HTML文件由“文档声明、文件头、文件体”组成。
对于HTML5，文档声明也应该采取HTML5.0的声明方式，具体代码如下：
!doctype html
html
head
meta charset="UTF-8"
titleHTML5学堂（码匠） 言成科技 联合出品/title
meta name="viewport" content="width=device-width,user-scalable=no"
link rel="stylesheet" href="../css/reset.css"
/head
body
div具体内容/div
/body
/html
在html标签当中包含head标签和body标签两种，而head标签表示的是文件头，body标签表示文件体，文件头当中需要包含“字符编码”（head标签中的第一行）、“标题”（title标签）、“其他元信息”（除了字符编码外的其他meta），而文件体当中书写的具体代码就是在网页当中会显示的内容。
此外，在文件头部或文件体当中还可以使用link标签引入CSS文件，或者使用script标签引入JS文件。
关于文档声明，在传统的HTML4当中，有另外三种声明方法，请详见《文档声明 DOCTYPE常见的文档类型》
分享名称：html5简单代码,html5常用
转载来于：http://6mz.cn/article/dsicjis.html