前端用到的一些功能

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

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

 

未完待续...


相关文章
|
7月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
108 0
|
5月前
|
存储 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
|
1月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
76 4
|
2月前
|
前端开发 JavaScript
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
48 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
|
3月前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
2月前
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
173 0
|
2月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
235 0
|
2月前
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
27 0
|
3月前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
58 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
3月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
85 13