每日思考(2020/02/12)

不问归期 提交于 2020-02-13 00:58:14

题目概览

  • 页面中怎么嵌入Flash?
  • 说说你对媒体查询的理解
  • 写一个使两个整数进行交换的方法

题目解答

页面中怎么嵌入Flash?

  • 使用 object 和 embed 标签来嵌入:object 的很多参数和 embed 里面的很多属性是重复的,最大限度的保证了 Flash 的功能,没有兼容性问题。缺点是无法通过验证,由于为了兼容性而嵌入的 embed 标签是不符合 W3C 的规范的;微软由于种种原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在页面中的 ActiveX 有一个虚框,需要用户点击一次才能正常交互。Flash是作为一个 ActiveX 嵌入到网页中的,所以它也会受牵连,只有通过 JS 嵌入 Flash 才能解决这个问题;没有 Flash 版本检测,如果版本浏览器的flash插件版本不够,或者不能正常显示你的 swf 文件,或者会弹出一个 ActiveX 的确认安装的框——这个框对很多用户来说是很恐怖的。

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 02 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="Untitled-1" align="center">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="movie" value="mymovie.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" 09 width="550" height="400" name="mymovie"
                    align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer" />
            </object>
  • 单object:这种方法的名字叫做 Flash satay。浏览器兼容性也不错,缺点是需要一个 holder swf 来加载你的目标 swf以保证 IE 中的 stream能力,如果你需要通过 flashvars来传参,或者和页面的 JS 交互,会很麻烦。ActiveX的虚框问题。没有版本检测。还是有少数用户代理(比如一些版本的 safari 和一些屏幕阅读器)不认这种方式,有 bug

    <object type="application/x-shockwave-flash" data="c.swf?path=movie.swf"
    width="400" height="300">
      <param name="movie" value="c.swf?path=movie.swf" />
      <img src="http://xuguangzhi2003.blog.163.com/blog/noflash.gif" width="200" height="100"     alt="" />
    </object>
  • 用JS嵌入的方法:

    • SWFObject

      <div id="myContent">
           <h1>Alternative content</h1>
           <p><a href="http://www.a.com/getflashplayer">
                  <img src="http://www.a.com/r.gif" alt="Get Adobe Flash player" />
               </a>
          </p>
      </div>
    • Macomedia(现在是Adobe了..)提供的脚本

    • UFO - Unobtrusive Flash Objects

  • 总结:现阶段用 JS 嵌入 Flash 是最完美的方法,虽然这法子这也是由于浏览器的种种问题而作出的妥协。 但它在保证 Flash 功能的前提下还利用 JS 提供了额外的好处,再者又已经有人写了很完善的嵌入脚本可以方面地下载使用(推荐 SWFObject

说说你对媒体查询的理解

  • 媒体属性:媒体属性是CSS3新增的内容,多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

    • 颜色(color):指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0

      <style>
      @media (color){
          .box{height: 100px;width: 100px;background-color: lightblue;}    
      }    
      </style>
      <div class="box"></div>
    • 颜色索引(color-index):颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0

      <style>
      @media (min-color-index: 256){
          .box{height: 100px; width: 100px;background-color: lightgreen;}    
      }    
      </style>    
      <div class="box"></div>
    • 宽高比(aspect-ratio):宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

      <style>
      @media (min-aspect-ratio: 1/1) {
          .box{height: 100px;width: 100px; background-color: lightgreen; }        
      }
      </style>
      <div class="box"></div>
    • 设备宽高比(device-aspect-ratio):设备宽高比描述了输出设备的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例

      <style>
      @media (device-aspect-ratio:16/9) {
          .box{ height: 100px;width: 100px; background-color: pink;}        
      }
      </style>
      <div class="box"></div>
    • 设备高度(device-height):设备高度描述了输出设备的高度

      <style>
      @media (min-device-height: 1000px) {
          .box{ height: 100px;width: 100px; background-color: pink;}        
      }
      </style>
      <div class="box"></div>
    • 设备宽度(device-width):设备宽度描述了输出设备的宽度

      <style>
      @media (min-device-width: 1000px) {
          .box{ height: 100px; width: 100px;background-color: lightblue; }        
      }
      </style>
      <div class="box"></div>
    • 网格(grid):网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0

      <style>
      @media (grid:0) {
          .box{height: 100px;width: 100px; background-color: lightgreen;}        
      }
      </style>
      <div class="box"></div>
    • 高度(height):高度描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度

      <style>
      @media (min-height:800px) {
          .box{ height: 100px; width: 100px;background-color: lightgreen; }        
      }
      </style>
      <div class="box"></div>
    • 宽度(width):宽度描述了输出设备渲染区域的宽度

      <style>
      @media (min-width:800px) {
          .box{ height: 100px;width: 100px; background-color: lightgreen;}        
      }
      </style>
      <div class="box"></div>
    • 黑白(monochrome):黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0

      <style>
      @media (monochrome:0) {
          .box{height: 100px; width: 100px; background-color: lightgreen;}        
      }
      </style>
      <div class="box"></div>
    • 方向(orientation):方向指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式,值landscape(横屏) | portrait(竖屏)

      <style>
      @media (orientation: portrait) {
          .box{height: 100px;width: 100px;background-color: lightgreen; }        
      }
      </style>
      <div class="box"></div>
    • 分辨率(resolution):分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示(关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此

      <style>
      @media (min-resolution: 90dpi) {
          .box{height: 100px;width: 100px; background-color: lightgreen; }        
      }
      </style>
      <div class="box"></div>
    • 扫描(scan):扫描描述了电视输出设备的扫描过程,值有 progressive | interlace

  • 语法:媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假

    • 当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假,<link>标签上带有媒体查询的样式表仍将被下载(只不过不会被应用)

      <link rel="stylesheet" href="style.css" media="print">
      <div class="box"></div>  
    • 逻辑操作符:操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

      @media all and (min-width: 700px) and (orientation: landscape) { ... }
      @media (min-width: 700px) and (orientation: landscape) { ... }
      @media (min-width: 700px), handheld and (orientation: landscape) { ... }
      @media not all and (monochrome) { ... }
      <link rel="stylesheet" media="only screen and (color)" href="example.css" />
    • 方法:window.matchMedia()方法用来检查CSS的mediaQuery语句

      • 属性:window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数,返回一个MediaQueryList对象。该对象有media和matches两个属性,其中media返回所查询的mediaQuery语句字符串,matches返回一个布尔值,表示当前环境是否匹配查询语句

        var result = window.matchMedia('(min-width: 600px)');
        console.log(result.media); //'(min-width: 600px)'
        console.log(result.matches); // true
        
        var result = window.matchMedia('123');
        console.log(result.matches);//false   无法解析mediaQuery参数,返回的总是false,而不是报错
      • 事件:window.matchMedia方法返回的MediaQueryList对象有两个方法,用来监听事件:addListener方法和removeListener方法

        // 指定回调函数
        mql.addListener(mqCallback);
        // 撤销回调函数
        mql.removeListener(mqCallback);
    • 打印样式:媒体查询的一个常用功能是打印样式的设置,主要是背景清除、字体颜色变黑等

      @media print{
          *,*:before,*:after{
              background:transparent!important;
              color:#000 !important;
              box-shadow: none !important;
              text-shadow: none !important;
          }
          a,a:visited{
              text-decoration: underline;
          }
          a[href]:after{
              content:"(" attr(href) ")";
          }
          abbr[title]:after{
              content:"(" attr(title) ")";
          }
          a[href^="#"]:after,a[href^="javascript:;"]:after{
              content:"";
          }
          pre,blockquote{
              border: 1px solid #999;
              /*只有opera浏览器起作用,避免在元素内部插入分页符*/
              page-break-inside:avoid;
          }
          thead{
              display:table-header-group;
          }
          tr,img{
              page-break-inside:avoid;
          }
          img{
              max-width:100%!important;
          }
          p,h2,h3{
              /*元素内部发生分页时,最少保留3行*/
              orphans:3;
              /*元素内部发生分页时,元素顶部最少保留3行*/
              windows:3;
          }
          h2,h3{
              /*避免在元素后面插入一个分页符*/
              page-break-after:avoid;
          }
      }
    • 相对单位:一般而言,rem是相对于HTML的字体大小的。但是,由于媒体查询的级别非常高,它并不是HTML的子元素,不是相对于HTML,而是相对于浏览器的,而浏览器的默认字体大小是16px,如果HTML设置字体大小为12px,设置media="only screen and (max-width:1rem)",实际上,max-width等于16px,而不是12px,而正是由于媒体查询是相对于浏览器的, 所以使用rem就没有必要,完全可以使用em来替代

      <link rel="stylesheet" media="only screen and (max-width:1em)" href="example.css"  />

写一个使两个整数进行交换的方法

  • 临时变量:设置临时变量进行数据交换过程中的缓存。这样的做法直观,易懂。但是,会增加内存的使用

    var a = 1, b = 2,tmp;
    tmp = a;
    a = b;
    b = tmp;
  • 算术运算:通过算术运算过程中的技巧,可以巧妙地将两个值进行互换。但是,有个缺点就是变量数据溢出。因为JavaScript能存储数字的精度范围是 -253 到 253。所以,加法运算,会存在溢出的问题。

    var a = 1,b = 2;
    a = a + b; // a = 3, b = 2
    b = a - b; // a = 3, b = 1
    a = a - b; // a = 2, b = 1
  • 异或运算:巧用位运算的技巧,利用 a ^ b ^ b == a 的特点,进行数值交换,避免了使用算术运算带来的弊端,不会发生溢出问题。

    var a = 1, // 二进制:0001
        b = 2;  // 二进制:0010
    
    a = a ^ b; // 计算结果:a = 0011, b = 0010
    b = a ^ b; // 计算结果:a = 0011, b = 0001
    a = a ^ b; // 计算结果:a = 0010, b = 0001
  • ES6的解构:用解构的语法特性,解构语法还适用于其他类型的变量进行互换。

    let a = 1,b = 2;
    [a, b] = [b, a];
  • 利用数组特性进行交换

    var a = 1,b = 2;
    a = [a, b];
    b = a[0];
    a = a[1];
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!