html5简单代码,html css常用代码大全
用HTML5设计简单动画代码
!DOCTYPE html
峨眉山网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
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写的源代码案例，供初学者学习
首先准备好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(); //当前的系统时间 年月日 时分秒 星期 对象
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代码
这个是基础的表格，你可以去研究改一下就可以了。
!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简单代码,html css常用代码大全
本文URL：http://hbruida.cn/article/dsgcojd.html
