zoukankan      html  css  js  c++  java
  • 前端用到的一些功能

    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

    未完待续...

  • 相关阅读:
    devops之 gitlab-ci + mesos + docker + marathon 持续发布③marathon常用api的使用
    centos7环境下二进制编译安装ffmpeg
    jenkins2.236 + sonarqube7.6 + sonar-scanner3.3的集成配置和生产环境使用示例
    zabbix添加top10内存和cpu资源占用情况
    Marathon基于有认证的harbor仓库创建应用
    devops之 gitlab-ci + mesos + docker + marathon 持续发布③marathon 结合 gitlab-ci的CICD持续发布
    docker拉取指定版本的centos和python镜像
    devops之 gitlab-ci + mesos + docker + marathon 持续发布②安装marathon
    devops之 gitlab-ci + mesos + docker + marathon 持续发布①mesos集群环境的搭建
    zabbix4.0监控gpu
  • 原文地址:https://www.cnblogs.com/guojikun/p/6237056.html
Copyright © 2011-2022 走看看