原生js练习题---第三课

tomlingtm 发布于2019-08-19 17:56 / 3095人阅读

摘要：我这里更进一步修复了这个，想法很简单我可以等你输完再把非数字全替换掉，只要把方法的正则改成全局匹配就。页面加载后累加，自加实现效果页面加载后累加，自加第三题的变种，换成触发变化而已。

0x1用typeof查看数据类型

略过，不过typeof用来判断数据类型是不太靠谱的，尤其是涉及到引用类型的时候，除非是要检测一个变量是否有定义，否则最好采用Object.prototype.toString方法。

0x2用parseInt解析数字，并求和

实现效果：
3-02用parseInt解析数字，并求和

对这道题来说，用户的输入无法三种：数字、非数字、空字符（不输入）；而原题里的实现为防止用户可谓是处心积虑，空字符直接弹窗、而非数字用keyup事件实现输一个删一个，用户只能乖乖输入数字了。但有个bug，按着按钮不动是交替触发keydown和keypress，这时输一个删一个的效果就没用了。

我这里更进一步修复了这个bug，想法很简单---我可以等你输完再把非数字全替换掉，只要把replace方法的正则改成全局匹配就ok。不过尴尬的是，既然有了这个无死角防止输入非数字的效果，还要parseInt干嘛。。。

0x3累加按钮，自加1

实现效果：
3-03累加按钮，自加1

0x4输入两个数字，比较大小

实现效果：
3-04输入两个数字，比较大小

第二题的变种，这次还是正常点，改用正则判断，不用第二题那魔性的自动删除字符了。

0x5页面加载后累加，自加1

实现效果：
3-05页面加载后累加，自加1

第三题的变种，换成setInterval触发变化而已。

0x6判断数字是否为两位数

实现效果：
3-06判断数字是否为两位数

继续正则判断，这一期的题有点无聊啊。。

0x7网页计算器

实现效果：
3-07网页计算器

这题算是比较综合的题，所以相比前面的题目花了更多的时间，难点就是功能的实现。这里我的实现思路是比较简单的：就是用一个缓存区显示输入，再用一个公式区用缓存的数据构造计算式，最后点击等号时直接把计算式字符串用eval()执行输出。

这样一来这题就变成字符串处理了，在构造计算式时有很多分支情况，因为点击数字、小数点和运算符得考虑上一步的输入，一共有五种情况：运算符、数字、小数点、上一步的error、输入溢出屏幕。穷举出所有情况后，接下来就用正则判断出这些分支，以及对这些分支的各自处理了。

如上所述，因为只是简单粗暴的穷举，所以js里写了一堆if-else，感觉有点ugly⊙︿⊙。

除了js，还学到了一些新东西：比如文本框可以用readonly属性设置只读、用maxlength属性限制输入字符的个数（只能限制用户输入，如果像这题里直接修改文本框的value的话，这个限制是没有卵用滴）。

再者，在按钮样式设计上，这里使用了sprite图来做按钮效果，相比用纯css有更好的兼容性和可定制性；同时也了解到纯色的背景图片可以做得更小、要用时再平铺开来，能有效提高网页的性能。

08简易网页时钟

实现效果：
3-08简易网页时钟

以一秒为周期获取当前时间进行更新即可。要注意的是得输出的时间字符串都必须为两位，这里使用replace方法搭配正则进行格式化，由于正则本身就有判断和筛选的作用，就不用再罗哩罗嗦地去判断每个字符串的长度了，写起来更加简洁优雅。

09倒计时时钟（100秒）

实现效果：
3-09倒计时时钟（100秒）

核心内容和上一题差不多，只是把计时改变的内容由实时的时间换成了递减的秒数、再加上一个按钮控制动作。为了封装性更好，这里还用了一个单例对象来实现计时器，减少了无谓的全局变量。有了这个干净的接口，代码看起来清爽多了~

云服务器 GPU云服务器原生js 排序原生js js原生动画原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78993.html

VUE.js第三课模板语法

摘要：模板语法使用了基于的模版语法，允许开发者声明式地将绑定至底层实例的数据。的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进的系统。指令用于在表达式的值改变时，将某些行为应用到上。 Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数...

lx1036 2019-06-27 16:34 评论0 收藏0
体验javascript之美第三课 对象、类型、操作符

摘要：大彬哥今天岁，家住在北京，工作是前端开发讲师。另一个学生是赵日天，今年岁，家住在济南，工作是码农。默认值大彬哥我是我是大彬哥防止变量覆盖你的库库里常用如有疑问加入和更多资料，群对象 js对象我只想说三件事 1.js中的对象就是键值对，和java等语言的对象完全不一样。 {name:leo,age:18} 2.键可以定义多次，值却只能是最后一个。这个跟变量有点类似。 3.键值对里面还...

codecook 2019-08-20 15:50 评论0 收藏0