2018年2月

1.盒子需要使用背景图的时候必须用padding，margin不能设置背景。
2.会出现外边距合并或者margin塌陷的时候用padding，上下盒子都使用margin的时候，容易合并。
3.行内元素上下只能设置padding，不能设置margin。
4.看border，如果是a连接，看能不能让字体变色，或者显示小手。
5.根据开发过程中的需求来决定。

css圆角矩形的制作（border-radius）的表示方法

  • border-radius: 宽/高一半；
  • border-radius: 50%；
  • border-radius: 0.2em；
  • border-radius: 100px；
  • border-radius: 左上角 右上角 右下角 左下角。

绘制圆形

.one{
      width: 100px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

绘制小型引导框

.one{
    width: 20px;
    height: 20px;
    background: #C81623;
    border-radius: 50% 50% 50% 0;
}

绘制同心圆

.one{
     width: 100px;
     height: 100px;
     background: #C81623;
     border:20px solid yellow;
     border-radius: 50%;
}

绘制椭圆

 .one{
      width: 200px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

JavaScript实现动态时钟以及分时问候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript实现动态时钟以及分时问候</title>
</head>
<body>
    <div id="time">
        </div><div id="timeShow"></div>
</body>
</html>
<script language="javascript">
     var t = null;
    t = setTimeout(time,1000);//开始执行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
        h=dt.getHours();
        m=dt.getMinutes();
        s=dt.getSeconds();
       if(h < 6){document.getElementById("time").innerHTML =  "凌晨好";}
            else if (h < 9){document.getElementById("time").innerHTML =  "早上好";}
            else if (h < 12){document.getElementById("time").innerHTML =  "上午好";}
            else if (h < 14){document.getElementById("time").innerHTML =  "中午好";}
            else if (h < 17){document.getElementById("time").innerHTML =  "下午好";}
            else if (h < 19){document.getElementById("time").innerHTML =  "傍晚好";}
            else if (h < 22){document.getElementById("time").innerHTML =  "晚上好";}
            else {document.getElementById("time").innerHTML =  "夜里好";}
       document.getElementById("timeShow").innerHTML = "当前时间："+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //
    }

  </script>

数组的定义
var array = new Array();或者var array = [];
注意：var arr = new Array(参数);参数位置一个数值时为数组长度，多个数值时为数组中的元素。数组是一种数据类型。
数组的长度
数组的长度 = 数组名.length;
可以通过修改数组的长度来改变数组中元素的个数，如果改小了，数组从后面删除元素。（伪数组的长度可以修改，但是不能修改里面的元素）

赋值
数组中通过下标的方式进行赋值。下标从0开始:array[0]="ddd";。
数组的初始化
var array = [3,2，"xiaoning"];//字面量定义
数组的遍历
获取数组中的元素：数组中的指定元素 = 数组名[索引值];
数组的索引代表的是数组中的元素在数组中的位置，从0开始。
如果获取数组中元素是，数组名[索引值]，没有指定索引（元素没那么多），系统不报错，而是给定值为undefined；

for(var i = 0;i<array.length();,i++){
   document.write(array[i]);
}

注意：通过数组名.length获取数组长度（元素个数）。数组的长度正好可以做下一个元素的索引值。
数组的合并
使用concat方法合并数组。

var arr = new Array(3)
arr[0] = "xiao"
arr[1] = "ning"
var arr2 = new Array(3)
arr2[0] = "bo"
arr2[1] = "ke"
document.write(arr.concat(arr2))

join 方法
join方法返回一个字符串数组。在每个数组元素之间添加分隔符。

函数（方法）定义和调用
通过 function 关键字
和自定义方法名 既可定义一个函数。 如下：

function test(x){  //定义
  alert(x);
}

test(3);//调用

注意：

  • function指出这是一个函数定义；
  • test是函数的名称；
  • (x)括号内列出函数的参数，多个参数以,分隔；
  • { ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

顺序结构

顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。一般情况下都是从上向下执行。

选择结构

选择结构表示程序的处理步骤出现了分支，它需要根据某一特定的条件选择其中的一个分支执行。
If...else

if(条件表达式){
如果条件表达式结果为true,执行该处代码。  
}else{
如果条件表达式结果为false,执行该处代码。
}

if else嵌套

if(条件表达式){ 
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else  if(条件表达式){
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else  if(条件表达式){
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else{
如果上边条件表达式结果都为false,执行该处代码。
}

switch语句

switch(变量){
case 1:
如果变量和1的值相同，执行该处代码
break;
case 2:
如果变量和2的值相同，执行该处代码
break;
case 3:
如果变量和3的值相同，执行该处代码
break;
default:
如果变量和以上的值都不相同，执行该处代码
break;
}

注意：

  • switch后边的变量和case后边值的数据类型必须保持一致。
  • switch语句可以对变量进行集体判断。

循环结构

循环结构表示程序反复执行某个或某些操作，直到某条件为假(或为真)时才可终止循环。
While循环

While(条件表达式){
   只要条件表达式结果为true,循环一直执行，当条件表达式结果为false的时候，循环终止
}

注意：While循环语句需先在循环体外定义变量。
Do while循环

Do{
循环体代码；首先执行该循环体代码一次。
如果while后边的表达式结果为true,该循环体会一直循环。
如果结果false,该循环终止。
}while(条件表达式)

do...while至少循环以一次。

for循环

for(定义变量;条件表达式;自增自减){
循环体代码
}

执行顺序:

  • 首先定义变量.
  • 如果条件表达式结果为true的时候，执行for循环里的代码，如果为false，循环体代码终止执行。
  • 执行for循环里的代码之后，再执行自增自减。

注意：
1．遍历数组首选for循环，简单循环使用for。
2．而while循环强调，不记循环次数（不知道循环多少次），首选while。
3．最后do...while循环强调，无论怎样，至少执行一次是，使用do...while。

附录：自增自减

  • 在不参与运算的情况下，i++和++i都是在变量的基础加1。

  • 在参与运算的情况下

    • var i=5;var j=i++; 先将i的值5赋值给j,之后再自增。j的值为123 ， i 的值为6。
    • var j=++i; i先自增，在赋值给j。J的值为6，i的值 6。
  • 自减与自增原理一样。

附录：break和continue

break语句
在循环体内，只要代码遇到break,程序立马结束当前循环。
当前循环指的是break语句所在的循环体。结束本循环。

continue语句
continue语句指的是跳出本次循环，该语句后面的代码不再执行,整个循环体继续循环。

任何类型转字符串

定义: var num = 123;

  • String() :var str = String(num);
  • 变量.toString():var str = num.toString();
  • 变量+""
    注意：Null和undefined无toString方法。

字符串转数字类型

此转换容易产生NaN，一旦被转换的变量中含有非数字字符，都容易出现NaN
定义：
str1 = "123";str2="12.12";str3="123abc";str4="aaa
Number()

  • 数字类型的字符串，转换之后得到的数字。var num = Number(str1)//结果：123
  • 小数类型的字符串，转换之后得到的是原数字。var num = Number(str2)//结果：12.12
  • 非数字字符串，转换之后得到是NaN。var num = Number(str3)//结果：12.12

parseInt()

  • 整数数字类型的字符串，转换之后得到的整数数字。var num = parseInt(str1)//结果：123
  • 小数类型的字符串，转换之后取整。var num = parseInt(str2)//结果：12
  • 数字开头的字符串，转换之后得到的是前边的数字。var num = parseInt(str3)//结果：123
  • 非数字开头的字符串，转换之后得到的是NaN。var num = parseInt(str4)//结果：NaN

parseFloat()

  • 整数数字类型的字符串，转换之后得到的整数数字。
  • 数字开头的字符串，转换之后得到的是前边的数字。
  • 非数字开头的字符串，转换之后得到的是NaN。
  • 小数类型的字符串，转换之后得到的是原数字。

注意：

  • Boolean类型中：true数值为1；false为0；
  • null的数值类型为0；
  • undefined无数值类型或者为NaN。

转布尔类型

  • 数字和字符串转完之后为true，但是0除外（非0即真）。
  • undefined、null转完之后为false.

方法：

  • Boolean(变量) :var bool = Boolean("1111");//bool为true；
  • !!变量
    第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值;第二个逻辑非操作则对该布尔值求反;于是就得到了这个值真正对应的布尔值。

注意：隐式数据类型转换
在运算过程中，比如算数运算，程序自己进行的数据转换来进行计算，但是不会对原变量进行数据转换。

JavaScript常用的Date()对象

  • Date() 返回当日的日期和时间。 通过new 方法创建对象。
  • getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  • getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
  • getMonth() 从 Date 对象返回月份 (0 ~ 11)。
  • getFullYear() 从 Date 对象以四位数字返回年份。
  • getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 0代表的事星期日。
  • getHours() 返回 Date 对象的小时 (0 ~ 23)。
  • getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
  • getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

JavaScript常用的Math对象

  • Math.ceil() 向上取整，天花板函数

    • 如果是整数，取整之后是这个数本身
    • 如果是小数，对数进行向上舍入。

  • Math.floor() 向下取整， 地板函数。

    • 如果是整数，取整之后是这个数本身
    • 如果是小数，对数进行向下舍入。
  • Math.max(n1,n2) 取两个数的最大值。
  • Math.min(n1,n2)取两个数的最小值。
  • Math.pow(n1,n2)返货n1的n2次方。
  • Math.round() 进行四舍五入操作。
  • Math.random()返回0-1之间的随机数。
  • Math.abs(number)返回一个数字的绝对值（即该值不考虑数字是为正还是为负）。

JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。
下面的表格解释了这些算术运算符：
给定 y=5

运算符描述例子结果
+加x=y+2x=7
-减x=y-2x=3
*乘x=y*2x=10
/除x=y/2x=2.5
%求余数 (保留整数)x=y%2x=1
++累加x=++yx=6
--递减x=--yx=4

注意：

  • 加号（+）

    • 两个数字类型的变量相加，得到的是一个数字类型。
    • 一个数字类型和一个字符串相加，得到的是一个字符串。字符串与字符串相加得到的也是字符串，此时的加号相当于字符串连接符。

  • 减号（-）

    • 两个数字类型的变量相减，得到的是一个数字类型。
    • 一个数字类型和一个数字字符串相减，得到的是一个数字类型。
    • 一个数字类型和一个非数字字符串相减，得到的是NaN,NaN是一个数字类型。NaN表示的事非数值。

  • 除号

    • 两个数字类型的变量相除，得到的是一个数字类型。
    • 一个数字类型和一个数字字符串相除，得到的是一个数字类型。
    • 一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。
    • 0做为除数的时候，得到结果Infinity （无限大），Infinity 是一个数字类型。

    JavaScript 赋值运算符

    下面的表格解释了赋值运算符：
    给定 x=10 和 y=5

    运算符例子等价于结果
    =x=y-x=5
    +=x+=yx=x+yx=15
    -=x-=yx=x-yx=5
    *=x*=yx=x*yx=50
    /=x/=yx=x/yx=2
    %=x%=yx=x%yx=0

逻辑运算符

逻辑运算只有2个结果，一个为true,一个为false.

  • 且(&&)：只有两个表达式为true的时候，结果为true，其余全为false。
  • 或(||)：只要有一个表达式为true,结果为true，其余全为false。

  • 非(!)：取反，表达式为true,取反则为false；表达式为false,取反则为true。

    比较运算符

    比较运算符在逻辑语句中使用，以测定变量或值是否相等，返回值为true或false。
    下面的表格解释了比较运算符：
    给定 x=5，

    运算符描述例子
    ==等于（只比较值，不比较数据类型）x==8 为 false
    ===全等（值和数据类型都比）x===5 为 true；x==="5" 为 false
    !=不等于（只比较值，不比较数据类型x!=8 为 true
    !==不全等于（值和数据类型都比）x!==8 为 true
    >大于x>8 为 false
    <小于x<8 为 true
    >=大于或等于x>=8 为 false
    <=小于或等于x<=8 为 true

三元表达式

表达式?结果1:结果2;
如果表达式结果为true,执行结果1，如果表达式结果为false,执行结果2。

var sum = 520;
var love = (sum === 520)?"520":"1314";

逗号运算符

集体声明变量时使用：var num,str;

优先级

1()
2!、-（负数）、++、-- （正数省略+）（一元运算）
3*、/、%
4+、- （加，减）（二元运算）
5<、<=、<、>= （一级逻辑运算）
6==、!=、===、!==、 （二级逻辑运算）
7&& （三级级逻辑运算）
8ll
9?: （三元运算）
10=、+=、-=、*=、/=、%= （赋值运算）
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5