JavaScript基础-2（JS操作HTML、运算符）-CSDN博客

数据类型转换

1.自动转换（在某种运算环境下）

Number环境
String环境
Boolean环境

2.强制类型转换

Number()
- 字符串：纯数字字符和空字符转为正常数字，其他NaN
- 布尔值： ture:1 false:0
```
 var str="abc";
 console.log(typeof(str));
 var num=Number(str);
```
String()
- 原样输出
Boolean()
- 转换为false: 数字0, 空字符串， null 和 undefined
- 转换为true: 值表示有东西
parseInt()
- 转换为整数
- 与Number的区别：一数字开头的字符串，不会转换为NaN
parseFloat()
- 转换为小数或整数
- 与Number的区别：一数字开头的字符串，不会转换为NaN
```
 var v = "123.14abc";
 console.log(typeof(v));
 var n = parseFloat(v);
 console.log(n);//输出为123.14
```

JS操作 HTML

1. 事件

onclick

2.函数

声明函数

  function 函数名(){
      代码;
  }

调用函数
```
  函数名()
```

3.获取元素

document.getElementById("id名")
js代码写在 html元素的后面

4.JS 操作html元素的属性以及css数据

元素对象.属性名
元素对象.style.属性名
css属性名用小驼峰命名法。只有写在元素style中的css属性，才可以被获取

innerHTML属性获取或设置双标签内的内容

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>简易 加法计算器</title>
      <style>
          input,button{
                      box-sizing: border-box;
                      width:300px;
                      padding:10px;
                      font-size:16px;
                      line-height: 16px;
                      border:1px solid #ccc;
                  }
              button{
                      background:#f5f5f5;
                  }
              #resBox{
                      box-sizing: border-box;
                      width:300px;
                      height:200px;
                      padding:20px;
                      border:1px solid #ccc;
                  }
              </style>
          </head>
          <body>
              <table>
                  <tr>
                      <td>加数1</td>
                      <td><input type="text"  id="num1"></td>
                  </tr>
                  <tr>
                      <td>加数2</td>
                      <td><input type="text"  id="num2"></td>
                  </tr>
                  <tr>
                      <td></td>
                      <td>
                          <button onclick="add()">加</button>
                      </td>
                  </tr>
                  <tr>
                      <td></td>
                      <td>
                          <div id="resBox">

                          </div>
                      </td>
                  </tr>
              </table>

              //JS对HTML的操作
              <script>
                  function add(){
                      //获取 两个input
                      var num1Input = document.getElementById("num1");
                      var num2Input = document.getElementById("num2");

                      //获取 两个 input 中的输入值 并进行强制转换
                      var num1Value = Number(num1Input.value);
                      var num2Value = Number(num2Input.value);

                      //对加数1 进行判断
                      if (isNaN(num1Value)) {
                          alert("请在第一个加数输入正确的数字");
                          return;  //结束函数
                      }

                      //对加数2 进行判断
                      if (isNaN(num2Value)) {
                          alert("请在第二个加数输入正确的数字");
                          return;  //结束函数
                      }


                      //执行相加
                      var res = num1Value + num2Value;

                      //把结果输出到 resBox中
                      var resBox = document.getElementById("resBox");
                      resBox.innerHTML = res;
                  }
              </script>
  </body>
  </html>