前端用到的一些功能
原创
©著作权归作者所有:来自51CTO博客作者Fly丶知秋的原创作品,请联系作者获取转载授权,否则将追究法律责任
1、文件下载(IE不支持此方法)
<a href="" download="file/asd.txt">txt下载</a> //download就是要下载的文件
IE可用这种方式
<a href="file/asd.zip">txt下载</a> //文件格式一定不能被浏览器支持,否则就是执行打开文件操作
2、可编辑的容器
<p contenteditable="true">这是一段可编辑的内容</p>
3、video标签(IE8及其以下版本不支持video标签)
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
video支持的格式及各种视频格式被浏览器支持的情况
当前,video 元素支持三种视频格式:
格式
| IE
| Firefox
| Opera
| Chrome
| safari
|
ogg
| no
| 3.5+
| 10.5+
| 5.0+
| no
|
mpeg4
| 9.0+
| no
| no
| 5.0+
| 3.0+
|
webm
| no
| 4.0+
| 10.6+
| 6.0+
| no
|
4、去掉button按钮的默认效果(按下效果,边框)
border: none; //去除边框(虽然也可以用border:0;但是建议用这个)
outline: none; //去除按钮的按下效果
5、阻止事件冒泡和默认功能
/*阻止冒泡*/
function myfn(e){
window.event ? window.event.cancelBubble : e.stopPropagation();
}
/*阻止默认行为*/
function myfn(e){
window.event ? window.event.returnValue : e.preventDefault();
}
6、分享到QQ、新浪微博、QQ空间
<a href="http://connect.qq.com/widget/shareqq/index.html?title=qqhaoyou&url=http://www.jb51.net&desc=还不错哦" target="_blank">QQ好友</a> //title:分享的标题;url:分享的url;desc:分享前的评价
<a href="http://v.t.sina.com.cn/share/share.php?url='分享的url'&title='分享内容'" target="_blank">新浪微博</a>
<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=被分享的url" target="_blank">QQ空间</a>
7、调整字间距
letter-spacing: 4px; //字间距(中英文都可以用)
word-spacing: 4px; //此间距(一般在英文中用)
8、去除IE下input框最右边出现X号和一个眼睛
::-ms-clear{display: none;}
::-ms-reveal{display: none;}
9、在线预览doc/docx,xls/xlsx,ppt/pptx文档
http://view.officeapps.live.com/op/view.aspx?src=文档位置
10、强制页面不使用缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
11、限制input type=file的可见类型
<input accept="audio/*|video/*|image/*|MIME_type">
MIME_type
未完待续...