前端用到的一些功能

简介: 前端用到的一些功能

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

 

未完待续...


相关文章
|
6天前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
38 0
|
6天前
|
Web App开发 前端开发 异构计算
前端如何实现网页变灰功能?
前端如何实现网页变灰功能?
|
7月前
|
前端开发
【前端设计】寄存器与主功能电路为异步时钟时的功能影响探索
【前端设计】寄存器与主功能电路为异步时钟时的功能影响探索
|
6天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
6天前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
5月前
|
前端开发 UED 计算机视觉
前端调取摄像头并实现拍照功能
前端调取摄像头并实现拍照功能
419 0
|
8月前
|
小程序 前端开发 算法
前端(十六)——微信小程序语音转文字,文字转语音功能的实现
前端(十六)——微信小程序语音转文字,文字转语音功能的实现
645 0
|
6天前
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
171 7
|
6天前
|
存储 前端开发 JavaScript
【前端面试题】这些js功能你一定要学会
【前端面试题】这些js功能你一定要学会
|
6天前
|
前端开发 JavaScript 搜索推荐
前端快速实现快捷键功能,超实用!
前端快速实现快捷键功能,超实用!