這個是基礎的表格,你可以去研究改一下就可以了。

成都創(chuàng)新互聯公司長期為上千家客戶提供的網站建設服務,團隊從業(yè)經驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯網生態(tài)環(huán)境。為臨桂企業(yè)提供專業(yè)的成都做網站、成都網站制作,臨桂網站改版等技術服務。擁有十余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。
!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
首先準備好11張圖片,放到img文件夾下供調用
代碼如下:
!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(); //當前的系統(tǒng)時間? 年月日 時分秒 星期 對象
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
先簡單的添加需要的控件
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,就會在把當前攝像頭的圖片就會出現在右邊了
!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
你想問的應該是,在搭建一個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文件。
關于文檔聲明,在傳統(tǒng)的HTML4當中,有另外三種聲明方法,請詳見《文檔聲明 DOCTYPE常見的文檔類型》
分享名稱:html5簡單代碼,簡單的html5代碼
轉載來于:http://chinadenli.net/article43/dsgoghs.html
成都網站建設公司_創(chuàng)新互聯,為您提供微信小程序、面包屑導航、靜態(tài)網站、域名注冊、網站策劃、網站導航
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯