<!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>

html5实战2的更多相关文章

  1. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  3. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

  5. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  6. HTML5实战与剖析之字符集属性(charset和defaultCharset)

    HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...

  7. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  8. HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

    HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...

  9. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

  10. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

随机推荐

  1. win10使用小技巧以及常见问题处理方案

    1.win10开机一直处于黑屏状态或者反复重启怎么处理? 处理小方法:开机按win+X组合件进入高级修复模式---选择修复开启模式---f4进入安全模式开机状态---管理控制面板---禁用或者卸载显卡 ...

  2. Xcode Custom Shortcut

    edit file "/Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Resources" add < ...

  3. iis7下配置php出现404.17错误的解决办法

    服务器上建有几个PHP站点,都在正常运行.今天又新建了一个PHP站点,处理程序模块配置的和其他几个都一样,但就是跑不起来,一直提示404.17错误,重启服务器也不行. 最后实在没办法了,就把正常运行站 ...

  4. 选择本地照片之后即显示在Img中(客户体验)

    最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑, 也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NE ...

  5. 用muduo实现memcached协议的例子

    最近花了两天时间用 muduo 部分实现了 memcached 服务器协议,代码位于 examples/memcached/server,能通过 memcached 的大部分测试用例(incr/dec ...

  6. 日期对象-Date

    新建日期对象  var date = new Date(); getTime()         从 1970年 1月 1日开始计算到 Date 对象中的时间之间的毫秒数. getFullYear() ...

  7. photo shop替换颜色（自己指定的颜色）

    点开"选择"-"色彩范围",在选择下拉菜单里选"取样颜色",吸取图片上的要改的颜色,"确定",左下角拾色器前景色用你希望 ...

  8. Spring Boot + Bootstrap 出现"Failed to decode downloaded font"和"OTS parsing error: Failed to convert WOFF 2.0 font to SFNT"

    准确来讲,应该是maven项目使用Bootstrap时,出现 "Failed to decode downloaded font"和"OTS parsing error: ...

  9. linux 查看php-fpm 进程数

    netstat -napo |grep "php-fpm" | wc -l

  10. 20145226夏艺华 《Java程序设计》第0周学习总结

    关于师生关系: 学生和老师之间我觉得关系时多元化的,不能拘泥于单独的一种关系:灌输与被灌输,教授与被教授--我认为,在不同的课程阶段,师生之间的关系都可以发生变化.前期的老师更像是一个指路的人,而在入 ...