<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>脚本控制交互元素<details></title>
<style type="text/css">
body { font-family: sans-serif; }
details {
overflow: hidden;
background: #e3e3e3;
margin-bottom: 10px;
display: block;
}
details summary {
cursor: pointer;
padding: 10px;
}
details div {
float: left;
width: 65%;
}
details div h3 { margin-top: 0; }
details img {
float: left;
width: 200px;
padding: 0 30px 10px 10px;
}
</style>
</head>
<body>
<details>
<summary>需要我为您服务吗? </summary>
<p>非常需要</p>
</details>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<style>
body {
font-family: 微软雅黑, 'Microsoft YaHei', \5FAE\8F6F\96C5\9ED1, sans-serif;
}
header {
background: #ADB96E;
}
footer {
padding: 10px 0;
background: #EADCAE;
clear: both;
text-align:right;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
h1 {
font-size:25px;
}
header, section, footer, aside, nav, article, figure {
display: block;
}
</style>
</head>
<body>
<article>
<header>
<h1>HTML5规范学习指南</h1>
<p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>
</header>
<p>日志正文全文放在这里</p>
<p>日志正文全文放在这里</p>
<section>
<h1>评论</h1>
<article>
<header>
<p>Posted by: 王三</p>
<p><time pubdate datetime="2010-12-10T19:10-08:00">
</time></p>
</header>
<p>HTML5 is good thing.</p>
</article>
<article>
<header>
<p>Posted by: 李老四</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00">
</time></p>
</header>
<p>正在学习HTML5，非常棒！</p>
</article>
</section>
</article>
</body>
</html>
--下载
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>使用progress元素</title>
<style type="text/css">
body {
font-size:12px
}
p {
padding:0px;
margin:0px
}
.inputbtn {
border:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px
}
</style>
</head>
<body>
<p id="pTip">开始下载</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下载按钮"
class="inputbtn" onClick="Btn_Click();">
<script type="text/javascript">
var intValue = 0;
var intTimer;
var objPro = document.getElementById('proDownFile');
var objTip = document.getElementById('pTip');
//定时事件
function Interval_handler() {
intValue++;
objPro.value = intValue;
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "下载已经完成！";
} else {
objTip.innerHTML = "正在下载中" + intValue + "%";
}
}
//下载按钮点击事件
function Btn_Click(){
intTimer = setInterval(Interval_handler, 100);
}
</script>
</body>
</html>
--比例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>使用meter元素</title>
<style type="text/css">
body {
font-size:13px
}
</style>
</head>
<body>
<p>共有200人参与投票,明细如下：</p>
<p>AAA：
<meter value="0.30" optimum="1"
high="0.9" low="1" max="1" min="0">
</meter>
<span> 30% </span></p>
<p>BBB：
<meter value="70" optimum="100"
high="90" low="10" max="100" min="0">
</meter>
<span> 70% </span></p>
</body>
</html>
demo4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用列表</title>
<link href="Css/css3.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async>
function Btn_Click(){
var num=document.getElementById("txtOrderNum").value;
var list=document.getElementById("olList");
list.setAttribute("start",num);
}
</script>
</head>
<body>
<h5>MTV排行榜</h5>
<ol id="olList">
<li>AA</li>
<li>BB</li>
<li>CC</li>
</ol>
<h5>设置开始值</h5>
<input type="text" id="txtOrderNum"
class="inputtxt" style="width:60px" />
<input type="button" value="确定"
class="inputbtn" onClick="Btn_Click();">
</body>
</html>
扫一扫
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
