无线开发学习笔记

无线开发笔记

• box-shadow: h-shadow v-shadow blur spread color inset

  • box-shadow是整块的阴影，很像是一个独立的盒子

    如果是outside：默认是盒子的大小，h正值时向右移动，以此类推，如图：

    如果是inset：默认不显示，h正值时，内部向右扩展，如图：

  • 阴影可叠加，用逗号隔开，相同配置的阴影会使颜色变深

  • 如果div设置为圆形，则阴影也会变为圆形

  • demo1

  • demo2

  • demo3

• rgba形式的颜色写法，在color、background、gradient等地方都能用到

• text-shadow: h-shadow v-shadow blur color;

  • 可以认为是原文字的副本

  • 用逗号可以同时展示多个文字阴影: demo

  • 其中的color可以是rgba，如2px 2px 5px rgba(0,0,0,.5)，并且文字的透明度不影响text-shadow的展现

  • JS中是textShadow

  • 即使阴影的位置为初始值0（0 0 0 #fff），也会对文字效果产生影响：

  • 文字展现的demo，效果如图

• transition: property duration timing-function delay;

  • 默认：all 0 ease 0

  • 非整数的时间可以写成：.2s

  • 监听属性变化，对<style>和js设置的css同时适用

  • 可以用逗号隔开，监听多个属性的变化，如:transition:1s width ease,10s height ease

  • 六种值

    • linear:匀速
    • ease：慢速-快速-慢速
    • ease-in：慢速-快速
    • ease-out：快速-慢速
    • ease-in-out：慢速-快速-慢速
    • cubic-bezier(n,n,n,n)

  • 如果元素变为display:none，失效

  • 对fontSize有效:demo

  • JS事件transitionend

    不能这样加事件：

    oDiv.ontranstionend=function(){
    	alert(1);
    }
    

    要这样写：

    oDiv.addEventListener('transitionend', function(){
    	oDiv.style.height = '300px';
    }, false);
    

• 运动

  • 定义

    @-webkit-keyframes test{
    	from{ 300px; color:#000; background:#ccc;}
    	to{ 500px; color:#fff; background:red;}
    }
    

  • 属性

    • -webkit-animation-name —— WebkitAnimationName

      执行运动

    • -webkit-animation-duration —— WebkitAnimationDuration

    • -webkit-animation-timing-function —— WebkitAnimationTimingFunction

    • -webkit-animation-delay —— WebkitAnimationDelay

    • -webkit-animation-fill-mode —— WebkitAnimationFillMode

    • -webkit-animation-iteration-count:infinite;

      infinite：运动次数是无限，运动到终点后，直接跳回起点重新运动，好像没有包含动画外的动作

    • -webkit-animation-direction

      alternate：轮流反向播放

    • -webkit-animation-play-state:paused;

      运动暂停

  • 完整的运动过程

    起点 —— 终点（`100%`的点 / 原点）+ 动画时间外的状态（根据终点判定）
    {           动画时间          } {        动画时间外         }
    	```
    
    

  • 颜色也可以渐变，比如从red变为blue

  • 有两种运动的形式

    • transition: 1s all ease

      监听属性变化，属性变化时触发运动

    • animation

      • @-webkit-keyframes test {}

        定义属性的变化

      • -webkit-animation-name等

        执行运动

• transform

  • js设置

    dom.style.WebkitTransform;
    dom.style.MozTransform;
    dom.style.MsTransform;
    dom.style.OTransform;
    dom.style.transform;
    

  • 倾斜：skew

    资料：http://www.bbs0101.com/archives/248.html

  • 位移：translate

    dom.offsetLeft 是不变的

  • 缩放：scale

    dom.offsetWidth 是不变的

  • 旋转：rotate

    rotate(45deg)的效果和rotateZ(45deg)效果一直

    是x/y/z轴自身旋转

  • 原点：transform-origin

    默认是中心点

    关注center bottom的放大效果

    demo

• 渐变：gradient

  • 写法：background:-webkit-linear-gradient(red,blue,yellow,green);
  • 颜色写法
    • rgb
    • green...
    • #ccc...
  • 更新起点
    • 支持right bottom式：background:-webkit-linear-gradient(right bottom,red,blue);
    • 支持deg式：background:-webkit-linear-gradient(-45deg,red,blue);

• 时间处理：(new Date()).toGMTString()

• localstorage

• 选择器: querySelector

• 自定义属性

  • dom.getAttribute('data-index')同dom.dataset.index
  • dataset可以获取setAttribute的属性
  • 性能上getAttribute更好，但差别并不大

• 表单

  type有email、url、month、week、submit等

  属性有 required 等

  示例代码

  <form action="http://www.baidu.com">
  	email：<input type="email" name="email" required><br>
      url:<input type="url" name="url" required><br>
      date:<input type="month"><br>
      week:<input type="week"><br>
  	<input type="submit">
  </form>
  

  <form action="http://www.baidu.com">
  	number:<input type="number"><br>
      range:<input type="range"><br>
      date:<input type="date"><br>
  	time:<input type="time"><br>
      email:<input type="email"><br>
      url:<input type="url"><br>
  	<input type="submit">
  </form>
  

• audio

  示例代码

  <audio src="http://yinyueshiting.baidu.com/data2/music/123651506/536010151200128.mp3?xcode=2ae33064a9e679aac9d26d3be69ae122dbbfc4acb439db37" controls></audio>
  

  <audio controls autoplay>
  	<source src="xxx">
  </audio>
  

  <audio controls autoplay loop>
  	<source src="xxx">
  </audio>
  

• vedio

  示例代码

  <video controls width="500">
  	<source src="bbb.mp4">
      <source src="bbb.ogg">
  </video>
  

  video的dom对象，有以下方法：dom.pause()、dom.play()

  有以下属性：dom.paused、dom.width

• border-radius

  发现一个特点，其值在50%+时，一个宽高相等的div，均呈现为圆形。

  demo

• canvas

  • 获取canvas的dom元素dom
  • 获取对象：gd = dom.getContext('2d')
  • 划线：gd.lineTo(x, y) n次
  • 设置线的颜色：gd.strokeStyle = 'blue'
  • 设置线的宽度：gd.lineWidth = 10
  • 设置填充颜色：gd.fillStyle = 'red'，且必须和gd.fill()搭配才能填充颜色
  • 合并划线：gd.stroke()

  可以实现如下效果:

  demo

• -webkit-box-reflect

  • 写法：-webkit-box-reflect: below 5px -webkit-linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1));

• 定位

  • HTML5 Geolocation API是新增的地理位置应用程序接口。如果浏览器支持，且设备具有定位功能，就能够直接使用这个API来获取当前位置信息。

  • 检测浏览器是否支持

    function supportGeolocation() {
        return 'geolocation' in navigator;
    }
    

  • window.navigator.geolocation对象存在3个方法

    • getCurrentPosition 获取当前地理位置

      getCurrentPosition(successCallback, onError, options)

      第1个参数为获取当前地理位置信息成功时所执行的回调函数，第2个参数为获取当前地理位置信息失败时所执行的回调函数，第3个参数为一些可选属性的列表。其中，第2、3个参数为可选参数。

      navigator.geolocation.getCurrentPosition(function(position) {
          //TODO 获取成功时的处理
          var timestamp = position.timestamp;
          var coords = position.coords;
          console.log(timestamp);
          console.log(coords);
      }, function(error) {
          //TODO 获取失败时的处理
          console.log(error);
      }, {
          maximumAge: 0
      });
      

      第1个参数，在获取地理位置信息成功时执行的回调函数中，带有一个position参数，它是一个Geoposition对象。该对象有以下两个属性：

      timestamp属性，时间戳。

      coords属性，coords属性是一个Coordinates类型对象，包含下面这些属性：

      1. accuracy 获取到的经度或纬度的精度（以米为单位）。
      2. altitude 当前地理位置的海拔高度（不能获取时为null）。
      3. altitudeAccuracy 获取到的海拔高度的精度（以米为单位）。
      4. heading 设备的前进方向。用面朝正北方向的顺时针旋转角度来表示（不能获取时为null）。
      5. latitude 当前地理位置的经度。
      6. longitude 当前地理位置的纬度
      7. speed 当前的前进速度（以米/秒为单位，不能获取时为null）。
      

      第2个参数，在获取地理位置信息失败时执行的回调函数中，带有一个error参数，它是一个PositionError对象。该对象有以下两个属性：

      code属性，可能值：
      1. 当属性值为1时，表示用户拒绝了位置服务，"User denied Geolocation"。
      2. 当属性值为2时，表示获取不到位置信息，"Timeout expired"。
      3. 当属性值为3时，表示获取信息超时错误。
      message属性
      message属性值为一个字符串，包含了错误信息，这个错误信息在我们开发和调试时非常有用。
      

      第3个参数是一个可选属性的列表，说明如下：

      enableHighAccuracy属性，是否要求高精度的地理位置信息。
      timeout属性，超时限制（单位为毫秒）。如果在该时间内未获取到地理位置信息，则返回错误。
      maximumAge属性，对地理位置信息进行缓存的有效时间（单位为毫秒）。如果该值设为0，则每次都去重新获取地理位置信息。
      

    • watchPosition 监视位置信息

      使用watchPosition(successCallback, errorCallback, options)方法可以定期地获取用户地理位置信息。该方法使用方式与getCurrentPosition方法类似，这里就不再详细解释了。调用该方法会返回一个数字，这个数字与setInterval方法的返回值用法类似，可以被clearWatch方法使用，以停止对当前地理位置信息的监视.

    • clearWatch 停止获取位置信息

      使用clearWatch方法可以停止对当前用户地理位置信息的监视。用法如下：

      navigator.geolocation.clearWatch(watchId);
      

      参数watchId为调用watchPosition方法时的返回值。