名言警句
1
2
3
4
5
6
7
8
9
10
11
12

javascript的一些小demo

为了熟悉js的知识点,在网上找了一些小demo练手,主要有以下几个。

ps:先准备一个一个的做完,抽空再记录一下思路。

1.简易计算器的实现(已完成)

需求:实现+、-、*、/等运算功能的计算器,可以使用小数点

基本的想法是:

①数字、小数点、运算符点击写入:写一个文本框input和一些按钮button,为按钮绑定点击事件,点击按钮获取按钮节点的值,并将按钮的值添加到文本框中

②点击=按钮获取运算结果:因为涉及到运算优先级的关系,要先计算乘除法,而后再计算加减法,因此要先将其拆分为只包含乘除的法的运算单元,计算完毕后再计算加减法。写两个函数模块,一个是输入为只包含加减法的算术字符串,输出为运算结果的字符串,compute_plus_minus('1+2-3');另一个是输入为只包含乘除法的字符串,输出为运算结果的字符串,compute_multiply_divide('1*2/3')

③加减乘除的实现:获取按钮值后进行判断,如果是加法就将前一个数和后一个数相加,其它的类似。

流程:

①使用正则表达式对获取到的input.value按加减号进行拆分:nums=inp.value.split(/[\+\-]/)得到运算单元列表nums,symbol_plus_minus=inp.value.match(/[\+\-]/)得到加减运算符列表

②对nums中的运算单元进行for循环遍历,使用compute_multiply_divide()对每一个计算单元进行计算,得到新的nums,它的每一个成员都为不包含运算符的数字字符串

③将新的nums和symbol_plus_minus合并为只包含加减法的字符串,使用compute_plus_minus()进行计算

难点:

compute_plus_minus()、compute_multiply_divide()的实现需要正则匹配分割,注意要先判断字符串中是否有运算符号,不然split的时候会报错

 

2.表单验证

难点:

①怎么验证字符串中只包含数字、字母和下划线(正则表达式怎么写?)

'158269872_azAZ15=+-'.split('').filter(item=>!(item>='A'&&item<='Z'||item>='a'&&item<='z'||item>=0&&item<=9||item=='_')))字符串中有特殊字符,这时会得到一个列表['=','+','-'],如果字符串不包含特殊字符则为[]。
要注意的是Boolean([])的值为true,需要写成Boolean([].length)的形式进行判断才会为false(具体原因参考这篇博客:https://www.cnblogs.com/frostbelt/p/3425498.html,https://www.zhihu.com/question/47555543
 
“假值”总共只有6个:false,undefined,null,0,""(空字符串),NaN
②电话号码
③身份证号
④邮箱

3.二级菜单

4.电子时钟(已完成)

5.选项卡

6.无缝滚动

7.图片切换

8.省市级联(已完成)

9.Jquery制作二级菜单

10.jQuery制作选项卡

11.Ajax注册用户名检测 

12.日历(已完成)

13.通过cookie进行用户自定义模板

14.广告弹出框

15.页面元素拖拽(已完成)

16.js实现导航栏吸顶(已完成)

17.移动的小人(已完成)怎么写一个函数f,当满足条件a时开始执行函数f1,直到满足条件b时开始执行函数f2,触发一个条件则换一个函数执行

posted @   坚持就是胜利PMV  阅读(433)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示