2016 Project Summary 0729-0805

Here are some of the doubts that have been encountered in the recent project, so the collection of information is summarized as follows

Digression: The data types in JS are undefined, Boolean, number, String, object, etc. 5 kinds, the first 4 are the original type, the 5th type is the reference kind.
(sort from simple to complex)

1, undefined, NaN, null relations and differences
<1> Type Analysis:
(1) The defined values and definitions are not assigned to the undefined,
(2) Nan is a special number,
(3) NULL is a special type of object.

　　　

<2> comparison operations:
(1) Undefined and null are equal, but not congruent;
(2) Nan is not equal to any value, nor is it equal to itself.

<3> main analysis undefined and null:
(1) null is a keyword; undefined is a property of the global object
(2) NULL is an object (empty object, without any properties and methods); undefined is a value of type undefined
(3) In the object model, all objects are instances of object or its subclasses, but the null object is not
(4) Null "equivalent (= =)" In Undefined, but not "full equivalent (= = =)" In undefined
(5) null and undefined can be converted to false by type, but not equal to false when operation

Off-topic: Each element has a box model, and there are two ways to calculate the width of the element in the world:
One is the standard (width and width of the element, excluding padding and border),
The other is the traditional box model (the width includes the width of the elements themselves plus padding and border).

2. Input box set width:100%, Overflow parent class container

Box-sizing:border-box, which indicates that the size of the element is any width within the border , that is, the traditional box model,
and Box-sizing:content-box; Indicates the width of the element, which is the width of the content, excluding padding, border.

/* set all elements as traditional box models */  {  -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;}

3. Best Use unit of mobile terminal
REM is a very useful property that can be set based on HTML, and is also very compatible.

4, Simulation: hover Pseudo-Class
There is a touch event on the mobile side, ontouchstart similar to onmouseover,ontouchend similar to onmouseout.
Using javascript:

  var mylinks = document.getElementsByTagName (' a ');   for (var i = 0, len = mylinks.length; i < Len; i++) {     function() {
             this. ClassName = "hover";
       false　　);     function (){
             this. ClassName = "";
       false );  }

Add hover effects with CSS:
a:hover {/* The effect you want */}

5, input type is the date case does not support placeholder

Desktop Side (MAC)
–safari does not support datepicker,placeholder normal display.
–firefox does not support datepicker,placeholder normal display.
–chrome supports DatePicker, displays the year, month, and day formats, ignoring placeholder.
Mobile side
–iphone5 IOS7 has datepicker function, but placeholder is not displayed.
–andorid 4.0.4 No DatePicker function, does not show placeholder
Workaround:
<input placeholder= "Date" class= "Textbox-n" type= "text" onfocus= "(this.type= ' Date ')" id= "Date" >

Because text is supported by placeholder. So when the user focus is automatically changed type to date, so that both placeholder and DatePicker.

6 , Chinese Input method input in English, there may be a one-sixth space between the letters

Add this code this.value = This.value.replace (/\u2006/g, ");

>> continuous accumulation in ...

2016 Project Summary 0729-0805