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

韩瑛
• 阅读 1900

0x1用typeof查看数据类型

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

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

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

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

我这里更进一步修复了这个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秒)

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

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
秃头王路飞 秃头王路飞
3年前
JS数据类型检测
数据类型检测相信大家有的时候判断数据类型的时候会有疑惑1、typeof、instanceof用的话会有哪些缺陷呢?2、哪个api只要记住的话,就可以完美判断呢?1、typeof返回的都是字符串jstypeofSymbol()'symbol'typeofnull'object'typeof'object'typeof'ob
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
明月 明月
3年前
JS数据类型的几种判断方法
1.typeof(常用)typeof是一个运算符,返回值是一个字符串,用来说明变量的数据类型,可以用来判断number,string,object,boolean,function,undefined,symbol这七种类型.2.instanceof(知道即可)instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上,返回值为布尔值,用于指示一个变量是否属于某个对象的实例3.Object.prototype.to
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
达里尔 达里尔
2年前
给数组添加新数据,判断数据是否重复
多选要进行数组拼接,希望判断往原数组里添的新数据是否重复,封装个简易方法languageconstdataArrayname:'aaa',id:1,name:'bbb',id:2;constnewDataname:'ccc',id:2;//要添加的新数
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究