您的位置：首页 > Web前端 > HTML5

HTML5 增强的页面元素

2016-11-08 22:59 507 查看

1.figure

2.figcaption

3.details

4.summary

5.mark

6.progress

7.meter

8.ol

9.dl

10.cite

11.small

<!DOCTYPE html>
<html>
<head>
<title>增强的元素</title>
</head>
<body>

<figure>
<img src ="img/bg_1.jpg" />
<figcaption style="align:center;">灯塔</figcaption>
</figure>

<script>
function detail_click(){
var p = document.getElementById("p");
if(detail.open){
p.style.visibility ="hidden";
}else{
p.style.visibility = "visible";
}
}
</script>

<details id="detail" onclick="detail_click()">
<summary>yanglong</summary>
<p id="p" style="visibility:hidden"><mark>示例</mark>示例</p>
</details><br /><br />

<script>
function btn(){
var i=0;
function thread_one(){
if(i <= 100){
i++;
updateProgress(i);
}
}
setInterval(thread_one,200);
}

function updateProgress(newValue){
var progressBar = document.getElementById("progress");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<progress style="background-color:#269abc" id="progress" max="50" onchange="thread_one()" ></progress>
<input type="button" value="加载" onclick="btn()" /><br /><br />

<meter value="40" min="0" max="100" low="10" high="90" optimun="80"></meter>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航