day12——js基本语句，函数，事件

绝地灬酷狼 2021-11-13 15:00 241阅读 0赞

#### 1. 鼠标触发事件： ####

<table> 
 <thead> 
  <tr> 
   <th>onchange</th> 
   <th>HTML 元素改变</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>用户点击 HTML 元素</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>用户在一个HTML元素上放上鼠标</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>用户从一个HTML元素上移开鼠标</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>综合以上，放上去和移开都为move的动作</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>用户按下键盘按键</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>浏览器已完成页面的加载</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>获取焦点时</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>失去焦点时</td> 
  </tr> 
 </tbody> 
</table>

eg:鼠标触发效果;控制灯开关;表单元素（获取焦点时，onload）  
控制灯开关：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>开关</title>
    </head>
    <body>
    <img src="images/pic_bulboff.gif" alt="" id="bulb" onmouseover="changeon()" onmouseout="changeoff()" />
    <script>
        function changeon(){
            document.getElementById("bulb").src="images/pic_bulbon.gif";
        }
        function changeoff(){
            document.getElementById("bulb").src="images/pic_bulboff.gif";
        }
    </script>
    </body>
    </html>

效果：  
![在这里插入图片描述][20190731233207408.png]  
hover后：  
![在这里插入图片描述][20190731233608448.png]

#### 2.带参函数 ####

定义：function name(arg1,arg2)\{……\}  
调用：name(x1,x2)  
arg1叫形参，x1 叫实参  
eg:计算器

#### 3.js严格区分大小写 ####

#### 4.作用域:全局变量和局部变量 ####

#### 5.document.bgColor： 改变body背景色 ####

document：代表整个html文档，可以用来访问页面中所有元素  
window:代表浏览器中一个打开的窗口

#### 6.条件判断语句 if(条件)\{ 执行语句\} ####

#### 7.＝赋值 ＝＝ 相等（判断） ＝＝＝恒等于 ####

#### 8.动态修改元素属性 ####

对象.属性名＝属性值

动态修改元素样式

对象.style.样式名＝样式值

样式名为驼峰式写法（第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母）  
注：  
对象获取方式：

a)通过ID获取：document.getElementById(“id名”);
    b)通过class获取：document.getElementsByClassName(“class名”)[索引值]；//类中只有一个元素也要表明索引值，不能省略
    c)通过标签名获取：document.getElementsByTagName(“标签名”)[索引值]
    注：索引号从0开始
    
    
    获取内容：普通元素  innerHTML:获取所有内容代码
    				 innerText：只获取文本内容；value:表单元素

== eg:获取方式==

#### 9. ####

*  a) 运算符：

a++和++a区别：a++先赋值后运算，++a 先运算后赋值

*  b) 算术运算符：±\*/%
 *  c) 赋值运算符：+＝ -＝ \*＝ /＝ %＝
 *  连接符/运算符：+
 *  d)比较运算符：＝ ＝＝ ＝＝＝ ！＝ ！＝＝ < > <= >=
 *  e)逻辑运算符： && || !
    
    逻辑与 左右都为true,结果为true  
    逻辑或 左右有一个为true,结果都为true  
    逻辑非 反过来 true->false false->true
 *  f)条件运算符（三目运算符）
    
    语法：（条件）？“条件成立时输出内容”：“条件不成立时输出内容”

eg:三目运算符

*  g)if-else语句

if(条件){
        条件成立时执行语句}
        else{
        条件不成立时执行语句}

eg: if-else语句

*  h) switch语句

switch(n){
    	case 1:
    	执行语句；
    	break;
    	case2…;
    	default:
    	执行语句；}

eg:switch语句

*  i)for语句：
    
    语法：for(初始化变量；变量结束条件；变量变化)

eg:for语句

##### 10.number和parseInt（parseFloat）的区别：转化为数字和强制转化为整型(浮点型) #####

11.hr可以自动居中  
12.字符串连接：先双引号截断，双引号里“++”，然后添加变量“+变量+”  
双引号里再嵌套为单引号：  
eg:99乘法表  
eg:

var count=23; 
        document.write("全班总共有"+count+"人"); 
        document.write("<h3 style='color:red;'>全班总共有"+count+"人</h3>");

13.while语句：

while(条件){执行语句}
    do{执行语句}while(条件)

区别：当条件不成立时，while直接跳出循环，do…while至少会执行一遍。  
14.为了使html和js代码明显分开，互不影响，将代码改为：eg:标准格式  
15.  
new Date().getDay()：获取一周中的具体的某一天0~6  
new Date().getDate():一个月中的具体的某一天  
new Date().getMonth()：因为范围从0开始，所以要显示正确的日期要给原对象加一后显示  
eg:倒计时

计时器 setInterval(“函数名”);  
new Date() 获取系统日期  
.getFullYear() 获取年份（4位数）  
.getMonth() 获取月  
.getDate() 获取天数  
.getDay() 获取星期  
.getHours() 获取小时  
.getMinutes() 获取分钟  
.getSeconds() 获取秒

倒计时：  
指定时间内多次调用

setInterval("daojishi()",1000)//函数，刷新时间(函数外部调用)
    
    指定时间内调用一次：应用于函数内部
    setTimeout("daojishi()",1000)// 函数，刷新时间

倒计时停止：  
清除计时器 （与使用的计时器一 一 对应）  
clearInterVal(计时器名称)  
claerTimeOut( 计时器名称)  
以上四个函数使用时都要说明计时器名称，否则可能出现第一次以后停止倒计时没有效果

如下：

jsq=setInterval("daojishi()",1000);//函数外部调用
        document.getElementById("btn").onclick=function(){
            clearInterval(jsq);
        }
        document.getElementById("btn1").onclick=function(){
            jsq=window.setInterval("daojishi()",1000);
        }

== eg:倒计时==  
16.Math.floor:向下取整；Math.ceil:向上取整  
eg: 倒计时：距离立秋还有多久  
.getTime()——1970年1月1日至今的毫秒数  
经过换算后解析出时间  
eg:倒计时2——立秋倒计时

[20190731233207408.png]: /images/20211113/d1574707f89243fa962742fe84fe1986.png
[20190731233608448.png]: /images/20211113/156e8752725849619bf51586ce427de5.png