2021-05-27

使用DW做一个简易的计算器

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：DW JS    
作者：易哲
撰写时间：2021/5/28
1.打开开发工具DW，然后新建一个HTML文档，这里有两种方式进行js代码的写入，第一种为外部导入式（即在新建一个js文件，通过script标签中的src属性引入）；第二种为嵌入式（通过script标签写入）。
在相对js代码量少且不复杂的情况下我建议选择第二种，这里我就使用第二种方式来制作这个建议的计算器：

2.写入基本的HTML元素，使用div标签进行布局，先把所有元素放进一个大盒子里面；然后写入三个input标签，类型为text分别用来放运算数字和运算结果；再放入select标签用来筛选加（+）、减（-）、乘（*）、除（/）;最后用一个button按钮点击进行计算。

3.设置css样式，让整个计算器内容看起来更加的顺眼：

下图为简易计算器的基本样貌，通过下拉框可以选择要进行计算的运算符：

4.向标签设置id，为写js代码做好提前准备：

5.获取到id及value值，再通过控制台检验是否获取到：

获取成功了！
6.封装点击事件的函数，把上一步的代码放进函数中，用switch语句判断选择的运算符：

这是简易计算器的效果：

小结：对文本框值的获取，下拉框的选择，以及switch语句的运用。