爱周末 » html5 http://zhoumo123.cn 知识分享，共同进步。zhoumo123.cn Thu, 07 Nov 2019 05:53:49 +0000 zh-CN hourly 1 http://wordpress.org/?v=4.0.1 html5使用DeviceMotionEvent实现摇一摇 http://zhoumo123.cn/web/html5/3394.html http://zhoumo123.cn/web/html5/3394.html#comments Tue, 01 Dec 2015 05:45:36 +0000 http://zhoumo123.cn/?p=3394 阅读全文 ]]> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<title> html5使用DeviceMotionEvent实现摇一摇 </title>
<style type=”text/css”>
.center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }
.normal{background:#000000;}
.normal .txt{color:#FFFFFF;}
.doing{background:#FF0000;}
.doing .txt{color:#FFFF00;}
</style>
</head>

<body id=”mybody” class=”normal”>
<div id=”txt” class=”txt center”>请执行摇一摇</div>
</body>

<script type=”text/javascript”>
var doing = 0; // 判断是否在动画显示中
var speed = 23; // 定义摇动的速度数值
var lastx = 0;
var lasty = 0;
var lastz = 0;

function handleMotionEvent(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;

if(doing==0){
if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){
doing = 1;
show();
}
}

lastx = x;
lasty = y;
lastz = z;
}

function show(){
document.getElementById(‘mybody’).className = ‘doing';
document.getElementById(‘txt’).innerHTML = ‘执行了摇一摇';
setTimeout(function(){
doing=0;
document.getElementById(‘mybody’).className=’normal';
document.getElementById(‘txt’).innerHTML = ‘请执行摇一摇';
},3000);
}

window.addEventListener(“devicemotion”, handleMotionEvent, true);
</script>

</html>

 

http://blog.csdn.net/fdipzone/article/details/50103027

]]> http://zhoumo123.cn/web/html5/3394.html/feed 0 手机访问页面字体变小，页面自适应屏幕的方法（meta中的viewport） http://zhoumo123.cn/web/html5/176.html http://zhoumo123.cn/web/html5/176.html#comments Thu, 24 Jul 2014 11:00:15 +0000 http://zhoumo123.cn/?p=176 手机访问页面字体变小，页面自适应屏幕的代码
页面中加入代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这样手机访问就自适应屏幕了。不支持IE8以及低于IE8的浏览器。

]]> http://zhoumo123.cn/web/html5/176.html/feed 0 article元素 http://zhoumo123.cn/web/html5/18.html http://zhoumo123.cn/web/html5/18.html#comments Tue, 20 May 2014 01:03:30 +0000 http://zhoumo123.cn/?p=18 阅读全文 ]]> article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。

除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

现在，让我们以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。

代码清单3-1   article元素示例


<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>苹果</b> ，植物类水果，多次花果...（"苹果"文章正文）</p>
    <footer>
        <p><small>著作权归***公司所有。</small></p>
    </footer>
</article>

这个示例是一篇讲述苹果的博客文章，在header元素中嵌入了文章的标题部分，在这部分中，文章的标题“苹果”被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入了一大段该博客文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用了article元素。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

接着，让我们来看一个关于article元素嵌套的代码示例，如代码清单3-2所示。

代码清单3-2   article元素嵌套示例

    <article> 
        <header> 
            <h1>苹果</h1> 
            <p>发表日期:  
                   <time pubdate datetime="2010/10/09">2010/10/09</time> 
            </p> 
        </header> 
        <p><b>苹果</b> ，植物类水果，多次花果...（"苹果"文章正文）</p> 
        <section> 
            <h2>评论</h2> 
            <article> 
                <header> 
                   <h3>发表者：陆凌牛</h3> 
                   <p> 
                      <time pubdate datetime="2010-10-10T19:10-08:00"> 
                          1小时前  
                      </time> 
                   </p> 
                </header> 
                <p>我喜欢苹果，我最喜爱的品种是红富士。</p> 
            </article> 
            <article> 
                <header> 
                   <h3>发表者：张玉</h3> 
                   <p> 
                      <time pubdate datetime="2010-10-10T19:15-08:00"> 
                          1小时前  
                      </time> 
                   </p> 
                </header> 
                <p>苹果？我不喜欢，我喜欢吃橘子。</p> 
            </article> 
        </section> 
    </article>

这个示例中的内容比代码清单3-1中的内容更加完整了，它添加了文章读者的评论内容，示例的整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，示例内容又分为几部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论部分进行了区分（section元素马上就要讲到，是一个分块元素，用来把页面中的内容进行分块），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。

关于示例中提到的time元素与pubdate属性，请查看本节结尾处有关time元素与pubdate属性的说明。

另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。代码清单3-3是它的一个示例。

代码清单3-3   用article元素表示插件

    <article> 
        <h1>My Fruit Spinner</h1> 
        <object> 
            <param name="allowFullScreen" value="true"> 
            <embed src="#" width="600" height="395"></embed> 
        </object> 
    </article>

 

参考资料：HTML5 与 CSS3 权威指南

]]> http://zhoumo123.cn/web/html5/18.html/feed 0 html5新增的结构元素 section元素 http://zhoumo123.cn/web/html5/8.html http://zhoumo123.cn/web/html5/8.html#comments Mon, 19 May 2014 06:23:00 +0000 http://zhoumo123.cn/?p=8 section元素

section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分，它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。

html5 中代码示例;

<section> … </section>

html4中代码示例;

<div> … </div>

 

 

]]> http://zhoumo123.cn/web/html5/8.html/feed 0