<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>交互</title>
<!-- <link rel="stylesheet" href=""> -->
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<style type="text/css" media="screen">
/* body{font-size: 12px;}
span{font-weight: bold;}
details{
overflow: hidden;
height: 0;
padding-left: 200px;
position: relative;
display: block;
}
details[open] {
height: auto;
}*/
body{
padding: 5px;
font-size: 12px;
}
menu{
padding: 0;
margin: 0;
display: block;
border: 1px solid #365167;
width: 515px;
}
menu li{
list-style: none;
padding: 5px;
margin: 5px;
height: 50px;
width: 500px;
}
menu li:hover{
border: 1px solid #7DA2CE;
background: #CFE3FD;
}
menu li img{
clear: both;
float: left;
padding-right: 8px;
margin-top: -2px;
}
menu li span{
padding-top: 5px;
float: left;
font-size: 13px;
}
command{
float: left;
margin: 5px;
width: 50px;
height: 30px;
cursor: hand;
}
#dialog{
display: none;
position: absolute;
left: 25%;
top:9%;
font-size: 13px;
width: 320px;
height: 150px;
border: 3px solid #666;
}
#dialog .title{
padding: 5px;
background-color: #eee;
height: 21px;
line-height: 21px;
}
#dialog .title .fleft{
float: left;
}
#dialog .title .fright{
float: right;
}
#dialog .content{
padding: 50px;
}
.inputbtn{
border: 1px solid #ccc;
background: #eee;
line-height: 18px;
font-size: 12px;
}
</style>
</head>
<body>
<!-- 内容交互 -->
<span onclick="span1_click()" >隐藏注脚</span>
<details id="details1">
<summary>详细信息</summary>
本页面生成于2016-01-07
</details>
<!-- 菜单交互 -->
<menu >
<li><img src="./img/zhaohang.gif" alt="zhaohang.gif"><span>zhaohang</span></li>
<li><img src="./img/zhaohang.gif" alt="zhaohang.gif"><span>zhaohang2</span></li>
<li><img src="./img/zhaohang.gif" alt="zhaohang.gif"><span>zhaohang3</span></li>
</menu>
<menu>
<command type="command" onclick = "command_click('文件')"> file </command>
<command type="command" onclick = "command_click('打开')"> open </command>
</menu>
<div id="dialog">
<div class="title">
<div class="fleft">提示</div>
<div class="fright">关闭</div>
</div>
<div class="content">
<div id="divTip"></div>
</div>
</div>
<!-- 状态交互 -->
<p id="ptip">begin download</p>
<progress value="0" max="100" id="prodownfile"></progress>
<input type="button" value="下载" class="inputbtn" onclick="btn_click()">
<p>lifewu</p>
<meter value="50" min="0" low="10" high="90" max=100"" optimum="100"></meter><span>50%</span>
<script type="text/javascript">
function span1_click(){
var objD = document.getElementById('details1');
var attD = objD.getAttribute('open');
if (attD!="open") {
objD.setAttribute("open","open");
}else{
objD.removeAttribute("open");
}
}
function command_click(strS){
document.getElementById('dialog').style.display="block";
var strContent="正在操作<font color=red>"+strS+"</font>选项";
document.getElementById('divTip').innerHTML=strContent;
}
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) {
objtip.innerHTML = "下载完成";
}else{
objtip.innerHTML ="正在下载"+intvalue+"%";
}
}
function btn_click(){
inttimer = setInterval(interval_handler,100);
}
</script>
</body>
</html>