2014-10-21 HTML5 Slides (下) | Learn much javascript from one line of code | Javascript的诞生和死亡

[hjzheng]

HTML5 Slides (下)

Graphics / Multimedia

• Audio + Video
• FullScreen API
• Canvas 2D
• Canvas 3D (WebGL)
• Inline SVG

  CSS3

• New CSS Selector
• Webfonts
• Text wrapping
• Columns
• Text stroke
• Hue/saturation/luminance color
• Rounded corners
• Gradients
• Shadows
• Background enhancements
• Border image
• Flexible Box Model
• Transitions
• Transforms
• Animations

  Nuts & Bolts

• New Selectors
• Custom data-* attributes
• Element.classList
• History API

  Learn much javascript from one line of code

  代码: 为页面所有元素添加1像素outline

[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

你可以在console中运行该code查看效果

分析代码

• $$("*");
• [].forEach.call()
• (~~(Math.random()*(1<<24))).toString(16)

$$("_") 这个来自command_line_API,类似的还有$和$x, 该方法类似于document.querySelectorAll('_')

上述方法得到是nodeList对象,是一个array-like对象,它不是一个数组,没有数组的方法, 所以使用数组的call方法,借用数组的forEach方法, [].forEach.call()

给所有元素加outline,如何取得颜色值? 1<<24 向左位移

1<<0 //2^0
1<<1 //2^1
1<<2 //2^2
1<<3 //2^3

Math.random()*(1<<24)取得0到2^24(FFFFFF)的随机数字.

~~ 取整数,类似于parseInt ~按位取反, 更多信息

var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001; // ~~c = 3213

~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

toString(16) 转换成16进制

(30).toString(); // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" Hexadecimal
(30).toString(2); // "11110" Binary
(30).toString(36); // "u" 36 is the maximum base allowed

JavaScript诞生和死亡 <视频>

[hjzheng]

CSS3 一个动画的 Example