5.JavaScript
- ECMAScript：客户端脚本语言的标准，且JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
5.1.基本语法
5.1.1.与html结合方式
- 内部JS：
- 定义<script>，标签体内容就是js代码
- 外部JS：
- 定义<script>，通过src属性引入外部的js文件
<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。且<script>可以定义多个。
5.1.2.注释
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
5.1.3.数据类型：
- 原始数据类型(基本数据类型)：
- number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
- string：字符串。 字符串 “abc” “a” ‘abc’
- boolean：true 和 false
- null：一个对象为空的占位符
- undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
- 引用数据类型：对象
5.1.4.变量
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
- 语法：var 变量名 = 初始化值;
- typeof运算符：获取变量的类型。
null运算后得到的是object
5.1.5.运算符
- 一元运算符：只有一个运算数的运算符
- ++，-- ， +(正号)
- ++ --: 自增(自减)
- ++(–) 在前，先自增(自减)，再运算
- ++(–) 在后，先运算，再自增(自减)
- +(-)：正负号
- 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
- 其他类型转number：
- string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
- boolean转number：true转为1，false转为0
- 其他类型转number：
- 算数运算符：+、-，*，/ 、% …
var str = "123"; var i = "23"; console.log(str - i); //100 console.log(typeof(str - i)); //number console.log(str + i); //146 console.log(typeof(str + i)); //number console.log(str * i); //2829 console.log(typeof(str * i)); //number - 赋值运算符：=、+=、-+ …
- 比较运算符：>、<、 >=、<=、<mark>、</mark>=(全等于)、!==(全不等于)
- 比较方式
- 类型相同：直接比较
- 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
- 类型不同：先进行类型转换，再比较
- ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
- !==：全不等于。全等于的相反
- 类型相同：直接比较
- 比较方式
- 逻辑运算符：&&、||、!
- 三元运算符： ? : 表达式
- 表达式? 值1:值2;
- 判断表达式的值，如果是true则取值1，如果是false则取值2；
- 其他类型转boolean：
- number：0或NaN为假，其他为真
- string：除了空字符串("")，其他都是true
- null&undefined：都是false
- 对象：所有对象都为true
5.1.6.流程控制语句：
- if…else…
- switch：
- 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
- switch(变量)，case 值。
- 在JS中,switch语句可以接受任意的原始数据类型
- while
- do…while
- for：用来遍历数组
- 增强for：用来遍历对象
var arr = ["zs", "ls", "wu", "zl"] arr.aaa = "aaa" //数组的属性 console.log(arr) // 遍历数组元素: 用来遍历数组 // aaa不会被遍历到 for (var i = 0; i < arr.length; i++) { console.log(arr[i]) } var obj = { name: "zs", age: "18"} // 专用于遍历属性: 用来遍历对象 // aaa会被遍历到 for( var item in obj){ // console.log(item) console.log(obj[item]) }
5.1.7.JS变量声明和函数
- 语句以;结尾，如果一行只有一条语句则;可以省略 (不建议)
- 变量的定义使用var关键字，也可以不使用
- 用： 定义的变量是局部变量
- 不用：定义的变量是全局变量(不建议)
- alert()是弹出窗口，必须确定才可以继续执行，document.write函数是打印在网页上
- console.log()函数是打印在浏览器开发者模式的控制台上，常用于调试
- ES6语法中可以使用let关键字表示变量的局部声明，如for循环里的
for(let i = 0;i<n;i++) - ES6语法中，可以用const关键字声明一个变量，不可修改
- typeof关键字：返回变量类型；instanceof：检测变量类型(但是有很奇怪的bug)
var str = "zs"; console.log(type str); //string console.log(str instanceof String); //false //很奇怪，第二句打印了是string类型的，但是检测一下又打印false，奇怪
5.1.8.Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style> td{
border: 1px solid; } </style>
<script> document.write("<table align='center'>"); //1.完成基本的for循环嵌套，展示乘法表 for (var i = 1; i <= 9 ; i++) {
document.write("<tr>"); for (var j = 1; j <=i ; j++) {
document.write("<td>"); //输出 1 * 1 = 1 document.write(i + " * " + j + " = " + ( i*j) +" "); document.write("</td>"); } //输出换行 document.write("<br>"); document.write("</tr>"); } //2.完成表格嵌套 document.write("</table>"); </script>
</head>
<body>
</body>
</html>
5.2.基本对象
5.2.1.Function：函数(方法)对象
- 创建：
1. var fun = new Function(形式参数列表,方法体); //不建议使用
2. function 方法名称(形式参数列表){
方法体
}
3. var 方法名 = function(形式参数列表){
方法体
}
- 方法：
- 属性：length：代表形参的个数
- 特点：
- 方法定义是，形参的类型不用写,返回值类型也不写。
- 方法是一个对象，如果定义名称相同的方***覆盖
- 在JS中，方法的调用只与方法的名称有关，和参数列表无关
- 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
- 调用：方法名称(实际参数列表);
5.2.2.Array：数组对象
- 创建：
- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
- 方法
- join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
- push()：向数组的末尾添加一个或更多元素，并返回新的长度。
- toString() 返回数组转换的数组值（逗号分隔）的字符串。
- pop() 方法从数组中删除最后一个元素,返回删除的元素
- push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
- splice() 方法可用于向数组添加新项, 返回([])
- sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
- reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
- 属性：length：数组的长度
- 特点：
- JS中，数组元素的类型可变的。
- JS中，数组长度可变的。
5.2.3.Boolean
- var myBoolean=new Boolean();
- var myBoolean=new Boolean(0);
- var myBoolean=new Boolean(null);
- var myBoolean=new Boolean("");
- var myBoolean=new Boolean(false);
5.2.4.Date：日期对象
- 创建：
- var date = new Date();
- 方法：
- toLocaleString()：返回当前date对象对应的时间本地字符串格式
- getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
5.2.5.Math：数学对象
- 创建：
- 特点：Math对象不用创建，直接使用。 Math.方法名();
- 方法：
- Math.random()：返回 0 ~ 1 之间的随机数。 含0不含1
- Math.ceil(x)：对数进行上舍入。
- Math.floor(x)：对数进行下舍入。
- Math.round(x)：把数四舍五入为最接近的整数。
- Math.max(x,y,z,…,n)：返回最大值
- Math.min(x,y,z,…,n)：返回最小值
- 属性：
- PI
5.2.6.Number
- 创建
- var x1=34.00; //使用小数点来写
- var x2=34; //不使用小数点来写
只要是个数，那么就是数值型的，无论整浮、无论大小、无论正负，都是number类型的
- 方法
- toString()：以字符串返回数值
- toFixed()：返回字符串值，它包含了指定位数小数的数字(四舍五入)
- toPrecision()：返回字符串值，它包含了指定长度的数字
- parseInt()：允许空格。只返回首个数字
- parseFloat()：允许空格。只返回首个数字：
- split()：将字符串转换为数组
- 属性
- MIN_VALUE：最小值
- MAX_VALUE：最大值
5.2.7.String
- 创建
- var str=‘123s’;
- var str=“123s”;
- var str = new String(“123s”);
- 方法
- indexOf()方法返回字符串中指定文本首次出现的索引（位置），不存在返回 -1。
- slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
- split() 将字符串转换为数组
- 属性
- length：数组长度
5.2.8.RegExp：正则表达式对象
- 正则表达式：定义字符串的组成规则。
- 单个字符:[]，如： [a] [ab] [a-zA-Z0-9]
- 特殊符号代表特殊含义的单个字符:
- \d:单个数字字符 [0-9]
- \w:单个单词字符[a-zA-Z0-9_]
- 特殊符号代表特殊含义的单个字符:
- 量词符号：
- ?：表示出现0次或1次
- *：表示出现0次或多次
- +：出现1次或多次
- {m,n}:表示 m<= 数量 <= n
- m如果缺省： {,n}:最多n次
- n如果缺省：{m,} 最少m次
- 开始结束符号
- ^:开始，$:结束
- 单个字符:[]，如： [a] [ab] [a-zA-Z0-9]
- 正则对象：
- 创建
- var reg = new RegExp(“正则表达式”);
- var reg = /正则表达式/;
- 方法：test(参数)：验证指定的字符串是否符合正则定义的规范
- 创建
5.2.9.Global
- 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
- 方法：
- encodeURI()：url编码
- decodeURI()：url解码
- encodeURIComponent()：url编码,编码的字符更多
- decodeURIComponent()：url解码
- parseInt()：将字符串转为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
- isNaN()：判断一个值是否是NaN
- NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
- eval()： JavaScript 字符串，并把它作为脚本代码来执行。
- URL编码
5.3.DOM简单介绍
5.3.1.功能：
- 控制html文档的内容
5.3.2.获取页面标签(元素)对象：Element
- document.getElementById(“id值”):通过元素的id获取元素对象
5.3.3.操作Element对象：
- 修改属性值：
- 明确获取的对象是哪一个？
- 查看API文档，找其中有哪些属性可以设置
- 修改标签体内容：属性：innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
5.3.***
-
功能： 某些组件被执行了某些操作后，触发某些代码的执行。
- 造句： xxx被xxx,我就xxx
- 我方水晶被摧毁后，我就责备对友。
- 敌方水晶被摧毁后，我就夸奖自己。
- 造句： xxx被xxx,我就xxx
-
如何绑定事件
- 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
- 事件：onclick— 单击事件
- 通过js获取元素对象，指定事件属性，设置一个函数
-
事件案例
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script> function fun(){
alert('我被点了'); alert('我又被点了'); } function fun2(){
alert('咋老点我？'); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2; </script>
</body>
//电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script> /* 分析： 1.获取图片对象 2.绑定单击事件 3.每次点击切换图片 * 规则： * 如果灯是开的 on,切换图片为 off * 如果灯是关的 off,切换图片为 on * 使用标记flag来完成 */ //1.获取图片对象 var light = document.getElementById("light"); var flag = false;//代表灯是灭的。 off图片 //2.绑定单击事件 light.onclick = function(){
if(flag){
//判断如果灯是开的，则灭掉 light.src = "img/off.gif"; flag = false; }else{
//如果灯是灭的，则打开 light.src = "img/on.gif"; flag = true; } } </script>
</body>
</html>
5.4.BOM
5.4.1.概念
-
Browser Object Model 浏览器对象模型
-
将浏览器的各个组成部分封装成对象。
5.4.2.组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
5.4.3.Window：窗口对象
- 创建
- 方法
- 与弹出框有关的方法：
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
- prompt()：显示可提示用户输入的对话框。
- 返回值：获取用户输入的值
- 与打开关闭有关的方法：
- close()：关闭浏览器窗口。谁调用我 ，我关谁
- open()：打开一个新的浏览器窗。返回新的Window对象
- 与定时器有关的方式
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
- 参数：
- js代码或者方法对象
- 毫秒值
- 返回值：唯一标识，用于取消定时器
- 参数：
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
- 与弹出框有关的方法：
- 属性：
- 获取其他BOM对象：
- history
- location
- Navigator
- Screen:
- 获取DOM对象
- document
- 获取其他BOM对象：
- 特点
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略，直接使用 方法名();
5.4.4.Location：地址栏对象
- 创建(获取)：
- window.location
- location
- 方法：
- reload()：重新加载当前文档。刷新
- 属性
- href：设置或返回完整的 URL。
5.4.5.History：历史记录对象
- 创建(获取)：
- window.history
- history
- 方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
- 参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录
- 属性：
- length：返回当前窗口历史列表中的 URL 数量。
5.5.DOM
5.5.1.概念：
- Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
5.5.2.W3C DOM标准
- 核心DOM - 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，上述5个对象的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
dom加载文档：dom树 文档 | 根元素<html> | ------------------------------------------------------ | | | | 元素<head> 元素<body> | | | ---------------------------- 元素<title> | | | 属性：href------ 元素<a> 元素<h1> | | | 文本:文档标题 文本:我的链接 文本：我的标题 对于dom结点： dom树中的节点彼此拥有层级关系(由节点构成) 整个文档是一个文档节点 每个HTML元素是元素节点 HTML元素内的文本是文本节点 每个HTML属性是属性节点 注释是注释节点 在节点树中，顶端节点被称为根（root） 每个节点都有父节点、除了根（它没有父节点） 一个节点可拥有任意数量的子节点，父、子和同胞(兄弟或姐妹）节点。 同胞是拥有相同父节点的节点 - dom加载顺序
- 超链接/form/直接输入 --à 告诉浏览器一个url
- 浏览器拿到这个url : 解析(url里面可能有域名) 如果域名对应一个ip，那么进行Dns解析(hosts文件. )(dns服务器)
- 浏览器根据带ip地址的url, 在互联网上找到这台服务器, (端口)
- 服务器,接收这次请求, 分析url第三部分分析参数, 准备相应的资源(html代码), 返回
- 浏览器获得返回的html代码
- 解析HTML结构(从上向下的过程)。(已经一边解析一边构建dom树)
- 加载外部脚本和样式表文件(导入从css js文件)。
- 解析并执行脚本代码。
- 构造HTML DOM模型。 (完成DOM树的构建并显示)
- 加载图片等外部文件。
- 页面加载完毕。
5.5.3.核心DOM模型：
- Document：文档对象
- 创建(获取)：在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法：
- 获取Element对象：
- getElementById()：根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName()：根据Class属性值(即CSS的修饰)获取元素对象们。返回值是一个数组
- getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组
- 创建其他DOM对象：
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
- 获取Element对象：
- 属性
- 创建(获取)：在html dom模型中可以使用window对象来获取
- Element：元素对象
- 获取/创建：通过document来获取和创建
- 方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性
- Node：节点对象，其他5个对象的父对象
- 特点：所有dom对象都可以被认为是一个结点
- 方法：
- CRUD dom树：
- appendChild()：向节点的子结点列表的结尾添加新的子结点。
- removeChild()：删除（并返回）当前结点的指定子结点。
- replaceChild()：用新节点替换一个子结点。
- CRUD dom树：
- 属性：
- parentNode：返回节点的父结点。
- childNode：返回结点的子结点
个人理解：可以把其他五个对象当做五个类的对象，这五个类中有很多方法，而Node类的对象就是这五个类的父类，所以五个对象也可以用Node的方法
5.5.4.HTML DOM
- 标签体的设置和获取：innerHTML、innerText
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
//修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px";- 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
- 利用事件来修改内容
<div id="div1"> div </div> <button onclick="changediv()">改变</button> function changediv() { var divNode = document.getElementById("div1") var textNode = document.createTextNode('div1') divNode.replaceChild(textNode, divNode.childNodes[0]) } //和上面的方式是一样的，但是更简便 function changediv() { // 无法解析b标签 // document.getElementById("div1").innerText = "<b>div1</b>" // 可以解析b标签 document.getElementById("div1").innerHTML = "<b>div1</b>" }
5.5.5.DOM树的CRUD
- 添加结点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ul1">
<li>zs</li>
<li>ls</li>
<li>wu</li>
</ul>
<input id="inputstr"><button onclick="add()">添加</button>
<script> function add() {
// 获得input这个节点 var inputNode = document.getElementById('inputstr') // 用户的输入值 var inputStr = inputNode.value // 根据用户输入的值, 创建一个文本节点 var textNode = document.createTextNode(inputStr) // 创建一个结点(创建一个li结点) var liNode = document.createElement("li") // 给li结点天际一个子文本结点 liNode.appendChild(textNode) // 获得input这个节点 var ulNode = document.getElementById('ul1') // 给ul这个节点添加一个新的孩子, newChild ulNode.appendChild(liNode) // 给input这个节点的value置空 inputNode.value = "" } </script>
</body>
</html>
- 删除结点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ul1" ><li>zs</li><li>ls</li><li>wu</li></ul>
<input id="inputstr"><button onclick="deleteli()">删除</button>
<script> function deleteli() {
var inputNode = document.getElementById('inputstr') var inputStr = inputNode.value var ulNode = document.getElementById('ul1') // var liNodes = document.getElementsByTagName('li') // 获得ulNode这个节点的所有子节点 var childNodes = ulNode.childNodes; console.log(childNodes) // 参数要求: 要删除是哪一个子节点 ulNode.removeChild(childNodes[inputStr]) } </script>
</body>
</html>
- 修改结点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ul1" ><li>zs</li><li>ls</li><li>wu</li></ul>
改变位置:<input id="inputtag"><br>
改变内容:<input id="inputstr">
<button onclick="changeli()">改变</button>
<script> function changeli() {
// 获得下标, 以及改变的内容 var inputTagNode = document.getElementById('inputtag') var inputStrNode = document.getElementById('inputstr') var liNode = document.createElement('li') var textNode = document.createTextNode(inputStrNode.value) liNode.appendChild(textNode) var ulNode = document.getElementById('ul1') // 参数要求: 新节点, 旧结点 ulNode.replaceChild(liNode , ulNode.childNodes[inputTagNode.value]) } </script>
</body>
</html>
5.6.事件监听机制
5.6.1.概念
- 某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如： 按钮 文本输入框…
- ***：代码。
- 注册监听：将事件，事件源，***结合在一起。 当事件源上发生了某个事件，则触发执行某个***代码。
5.6.2.常见的事件
- 点击事件：
- onclick：单击事件
- ondblclick：双击事件
- 焦点事件
- onblur：失去焦点
- onfocus：元素获得焦点。
- 加载事件：
- onload：一张页面或一幅图像完成加载。
- 鼠标事件：
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
- 键盘事件：
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
- 选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
- 表单事件：
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
- onchange 该事件在表单元素的内容改变时触发( , , , 和 )
5.7.Example：汇率转换器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> td{
width: 200px; height: 30px; text-align: center; } [colspan]{
background: red; } div{
margin: 0 0 5px 0; } select{
height: 35px; } button{
height: 33px; } input{
height: 30px; } </style>
</head>
<body>
<!-- 成套标签:select:option -->
<div>
<select id="select1" onchange="getrate()">
<option value="0">美元</option>
<option value="1">人民币</option>
<option value="2">欧元</option>
<option value="3">日元</option>
<option value="4">韩币</option>
<option value="5">港币</option>
</select>
<button onclick="changeselected()">互换</button>
<select id="select2" onchange="getrate()">
<option value="0">美元</option>
<option value="1">人民币</option>
<option value="2">欧元</option>
<option value="3">日元</option>
<option value="4">韩币</option>
<option value="5">港币</option>
</select>
数额:
<input id="inputstr">
<button onclick="getrate()">按汇率换算</button>
</div>
<table border="1">
<tr>
<td colspan="3">按当前汇率换算结果</td>
</tr>
<tr>
<td id="td11">人民币</td>
<td>汇率</td>
<td id="td13">美元</td>
</tr>
<tr>
<td id="td21">1</td>
<td id="td22">0.16</td>
<td id="td23">6</td>
</tr>
</table>
<script> function changeselected() {
var select1Node = document.getElementById('select1') var select2Node = document.getElementById('select2') var mid = select1Node.value select1Node.value = select2Node.value select2Node.value = mid } var arrRate = [1, 6, 0.9, 100, 1000, 7 ] var arrStr = ['美元', '人民币', '欧元', '日元', '韩币', '港币'] // 不行: html(表单元素value) css js // 存储? 存储 function getrate() {
var inputMoney = document.getElementById('inputstr').value var select1Value = document.getElementById('select1').value var select2Value = document.getElementById('select2').value if (inputMoney == ""){
return } var rate = arrRate[select2Value] /arrRate[select1Value] var money = rate * inputMoney console.log(typeof rate) document.getElementById('td11').innerText = arrStr[select1Value] document.getElementById('td13').innerText = arrStr[select2Value] document.getElementById('td21').innerText = inputMoney document.getElementById('td22').innerText = rate document.getElementById('td23').innerText = money } </script>
</body>
</html>
京公网安备 11010502036488号