扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
想做简单的你可以照着百科上的页面做,别管广告之类的功能,就是单纯努力去实现百科上的各种内容排版。
成都创新互联-专业网站定制、快速模板网站建设、高性价比武平网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式武平网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖武平地区。费用合理售后完善,10多年实体公司更值得信赖。
复杂的可以找些购物网站的主页做
HTML5 有很多强大的功能,比如获取设备的 x y z 坐标。这些值都可以通过代码获取并呈现出来。
也可以计算加速度及设备移动的方向,不知未来还会有多强大!
也不知什么机会看到了摇一摇,网页版本的。从网上看了一下,编写了一个代码,测试成功,贴出来。
可以后期加上很多功能,比如做个音乐播放器,或者内嵌到自己个性博客中等等。
下面是HTML源代码,
//Javascript
var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
function init() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('not support mobile event');
}
}
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed SHAKE_THRESHOLD) {
alert("摇动了,播放");
var media=document.getElementByIdx_x("musicBox");//获取音频控件
media.setAttribute("src","");
media.load();//加载音频
media.play();//播放音频
}
last_x = x;
last_y = y;
last_z = z;
}
}
html body onload="init()"
\
用力摇一摇你手机\
\
是自动弹出书角页的意思。
大部分的H5工具其实都可以做到,使用意派Epub360。点击图片直接就可以跳下一页。
“符合HTML5标准实现的页面就是H5页面”,那当前互联网上看到的网站基本上都在采用了HTML5标准。
!DOCTYPE html
html
head
title黑客帝国效果/title
/head
body
canvas id="canvas"/canvas
style type="text/css"
body{margin: 0;
padding: 0;
overflow: hidden;}
/style
script type="text/javascript"
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var texts = '0123456789'.split('');
var fontSize = 16;
var columns = canvas.width/fontSize;// 用于计算输出文字时坐标,所以长度即为列数
var drops = [];//初始值
for(var x = 0; x columns; x++){
drops[x] = 1;
}
function draw(){
//让背景逐渐由透明到不透明
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px arial';//逐行输出文字
for(var i = 0; i drops.length; i++){
var text = texts[Math.floor(Math.random()*texts.length)];
ctx.fillText(text, i*fontSize, drops[i]*fontSize);
if(drops[i]*fontSize canvas.height || Math.random() 0.95){
drops[i] = 0;
}
drops[i]++;}}
setInterval(draw, 33);
/script
/body
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流