html代码<button onclick="showtext()" class="item" data-type="draw">画图</button> <button onclick="hidetext()" class="item active" data-type="text">文本</button> <button hidden id="fatit1" type="button">发表贴图</button> <button id="tjpingl"type="submit"tabindex="6"value="提交"onclick="return zbp.comment.post()"/>发表评论</button>JS代码 function hidetext(){ document.getElementById("fatit1").style.display="none"; document.getElementById("tjpingl").style.display="block"; } function showtext(){ document.getElementById("fatit1").style.display="block"; document.getElementById("tjpingl").style.display="none"; }

基于HTML+JS完整好看的弹窗代码，代码提取于明月浩空的模板非常的实用！效果图：HTML：<a href="javascript:void(0)" onclick="weixin('图片地址')">输出位置</a> <div class="wxbox" style="display: none;"><ul><p class="wxclose"><span class="wxtitle"></span><a href="javascript:;" title="关闭"><i class="fa fa-times"></i></a></p><span class="wxpic"></span></ul></div>JS：function weixin(a) { $(".blackground").fadeIn(100); $(".wxtitle").html('<i class="fa fa-qrcode"></i> <span style="color:#f00">微信</span> 扫一扫关注') $(".wxbox,.wxpic").animate({ opacity: "show", marginTop: "-170px" }, "slow") var wx = new Image(); wx.src =a; wx.onload = function() { setTimeout(function() { $(".wxpic").html('<img src="'+wx.src+'" style="width:260px;height:240px;margin-top:-10px">') }, 100) }; }; $(function(){jQuery(function() { var meta = document.getElementsByTagName('meta'); var a = encodeURIComponent(location.href), b = encodeURIComponent(document.title); $(".wxclose a").click(function() { $(".blackground").fadeOut(100); $(".wxbox").animate({ opacity: "hide", marginTop: "-300px" }, "slow") }) })});CSS： 管理员设置 回复 可见隐藏内容

html 代码：video后边几个元素，可处理ios 系统的兼容性<video id="myVideo" controls="controls" poster='预览图' preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" > <source src="" type="video/mp4"> </video>js 代码：<script> //获取视频DOM元素 var myVideo = document.getElementById("myVideo"); myVideo.oncanplay = function(){ console.log("准备就绪"); }; //监听播放开始 myVideo.addEventListener('play',function(){ console.log("开始播放"); }); //监听播放结束 myVideo.addEventListener('pause',function(){ console.log("播放暂停"); }); //监听播放结束 myVideo.addEventListener('ended',function(){ console.log("播放结束"); }); //使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态 myVideo.addEventListener("timeupdate",function(){ var timeDisplay; //用秒数来显示当前播放进度 timeDisplay = Math.floor(myVideo.currentTime); console.log(Math.floor(myVideo.currentTime)) //当视频播放到 4s的时候做处理 if(timeDisplay == 4){ //处理代码 } },false); </script>事件介绍：事件描述loadstart浏览器开始在网上寻找媒体数据progress浏览器正在获取媒体数据suspend浏览器暂停获取媒体数据，但是下载过程并滑正常结束abort浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的error获取媒体数据过程中出错emptiedvideo元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体stalled浏览器尝试获取媒体数据失败play即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性pause播放暂停，当执行了pause方式时触发loadedmetadata浏览器获取完毕媒体的时间长和字节数waiting播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧canplay浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲canplaythrough浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲seekingseeking属性变为true，浏览器正在请求数据seekedseeking属性变为false，浏览器停止请求数据timeupdate由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变ended播放结束后停止播放ratechangedefaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变druationchange播放时长被改变volumechangevolume属性（音量）被改变或muted属性（静音状态）被改变