如何在程序中不用加号实现加法_程序员那些事 | JavaScript基础(六)

3c1616ef868aa3b83370352136eda359.gif

Hello,程序员那些事又与大家见面了!

738b6d6e714a8dbcb05cbacc241d3ddd.pngJS简易日历8cdb28f55cefdfdeda0dac548e24bb22.png

先给大家看一下效果:

ac62fd4144d5aacc2025b7852e166ebe.png

122fad3628b9ac33ca303c9313ab53ac.png

bb5af3a641ad3309d391478cb8341974.png

大家可能会觉得,唉~好像跟上节课讲的选项卡差不多,就是十二个按钮,改变this的class,同时下面放十二个div,每次显示其中一个,这样想没错,但是大家想想,我们这个是做年历,只有十二个月,要是我们做万年历呢?那就很麻烦了,所以我们换一种方式来做。

我们先来检查一下元素:

62b17a063128d27d6b3f5461a28d54eb.png

其实这里面显示的只有一个div

真正在变的只是里面的文字

af26cb2e8be88035b691503afb13baa7.png

下面我们就来看一下,怎么改变里面的文字(这就要用到我们上节课提到的innerHTML)

首先还是看布局:

a979030028f4f3f17937c4edaec2724a.png

实际上布局并不复杂,就是一系列的 li ,并且有一个的 class 是 active,大家结合我们上节课讲的一看就知道是怎么回事,下面还有一个 div ,这个 div 就是我们来放置这些文字的。

我们先把上面这十二个月的东西做了:

4618b6977f48b2dcae0f6cd427e14be2.png

跟选项卡一样,先把所有的 class 都去掉,然后只给 this 加一个‘active’的 class ,这样上半部分就完成了,当然下面的文字还是没有变的。

其实改变下面的也很简单,就是给下面的 div 设置 innerHTML :

67a1904349e56415336000bf6dbc3999.png

首先就是设置几月份的活动,不可能每个月都是一月,但是有一个问题,我们怎么知道但前的 li 是第几个月的呢?

我们可以给所有的 li 都编个号,也就是在循环中加一个 index 的属性:

cc0fee7367a829f81ccbd75c35230812.png

然后把1改为 this 的编号,说到这里不得不提到字符串的连接了:

字符串连接

把要连接的字符串放在单引号里面,用加号连接起来:

16d143120c1be617aee39779eda5ea94.png

6dfe95c482ec5127b76fcc684d200fb7.png

数字不用加单引号:

108956fc913523b7c761079b5aea3c16.png

44c2b9adfe5bcfefc9d91d07d0813f56.png

但是有一点要注意一下:

c5cf0ed89effee06b36a90d83d5a836b.png

这样写大家觉得会弹出什么呢?

“abc17def”吗?实际上并不是:

42ce44e3a373a7910fe0c5c55f854ddf.png

这其实与数学中的加减法类似,它有优先级的区分,前面的字符串先与12进行了字符串加法,然后“abc12”这个字符串再跟5相加,最后出来就是上面显示的咯~

那么如果我们想要输出“abc17def”该怎么写呢:跟数学一样,直接加一个括号就可以咯~

facfafae9c3a86cde590d9b1731609f1.png

64f8da8842b3d2e558033e5e9c52da25.png

好,咱们回到刚刚的问题,用字符串连接来实现月份的改变:

d37a4ffd3d7eb53fc516f75831316927.png

因为刚刚的循环中是从零开始的,而月份是从一开始的,所以我们这里要加一:

f0982c22a40141ee8dd34e09790d3db5.png

3b60bd5fe980c0d97790eae7ff2543b5.png

7c0a8cfde978149dc5aa31d3910876e9.png

现在月份就可以正常改变了,下面的文字怎么改变呢?

用最笨的办法当然就是用 if ,判断不同的月份出现不同的文字,但是这样太麻烦了。我们可以用JS里的数组来完成:

数组:

1ddd4cdce97eb00c2c9c567d9c4a05c7.png

559ffc7748ff1e7a3ecd99527d812ce9.png

数组里面也可以放字符串,所以我们就用数组来改变文字:

c8ff71bb36a8dfab013e9decc02c5e6b.png

245b3ff59a5cae1e13250a6a7ec3616a.png

d4ea98710917b8b08436a0b4226d2566.png

9b40adc4a7b41a0e71f333f17bf04f84.png

简易日历到这里就讲完了,相信大家也学到了很多,我们下期再见!

359e2f7912f67afb9b456aec0efb6c4a.png

官方QQ认证空间:2256167997

邮箱:qyxmtzx@163.com

官方新浪微博@中北大学大数据学院

主编: 阮臻

责编: 姜鑫源

本期编辑:实习编辑 韩康泽 魏孟梁

8e82b28e2dc00fe9486205da69d14392.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

求立方根_「每日一学」数学七上:立方根的知识要点

哈喽,大家好!我们又见面了,欢迎继续关注【轩爸辅导】的【口袋数学】。日更【每日一学】【每日一练】,帮助孩子日积月累,考出好的成绩。配套辅导,哪里不会学哪里,哪里出错练哪里,帮助…

mongodb适用于_适用于MongoDB和Mongometer的SpiderMonkey至V8

mongodb适用于通过10gen将MongoDB 2.3 / 2.4的默认JavaScript引擎从SpiderMonkey切换到V8,我想我将借此机会使用mongometer比较这些发行版的相对性能。 作为安全专家,我真的应该首先研究“ 其他身份验证功能” ……嘿。 我将记录比较过程中所采取的步骤…

地面指示标志_详解消防应急照明和疏散指示系统的施工及安装方法消防施工

详解消防应急照明和疏散指示系统的施工及安装方法消防施工消防应急照明与疏散指示系统在生活中随处可见,相信您并不陌生,它是为人员疏散、消防作业提供照明和疏散指示的系统,由各类消防应急灯具及相关装置组成。自今年3月1日国家标准GB 51309…

管理任务执行-有效执行

背景 给任务排优先级是解决做什么的问题。有效执行解决的是怎么做的问题。 项目执行的要点。 清晰的目标 现象 1.明确项目的初衷,但是没有设定可以衡量的目标。 2.在你的眼中目标很清晰,但是负责项目实施的员工并不知道从哪下手去执行; 3.两周…

什么是实验室人员比对人员_CNAS实验室认可对人员、设备的要求

一、人员要求1、从事实验室活动的人员不得在其他同类型实验室从事同类的实验室活动。 2、从事检测或校准活动的人员应具备相关专业大专以上学历。如果学历或专业不满足要求,应有 10 年以上相关检测或校准经历。关键技术人员,如进行检测或校准结果复核、检…

anaconda base环境_如何在最新版的Anaconda下安装Tensorflow 1.9

去年10月Tensorflow刚刚开放了2.0,当然用2.0慢慢地会变成未来使用Tensorflow的趋势。但是,关于如何用2.0进行机器学习和深度学习研究的书籍市面上能买到的大多都还是英文原版,且很少,因为太新中文的参考书更是少的可怜。因此&…

降级安装_如何升级iOS13测试版,还有降级

我是果子,前几天苹果发布了iOS13第二个开发者预览版,并且放出了描述文件,可以直接在手机上通过安装描述文件OTA升级。升级iOS13预览版不过我发现还有很多小伙伴不会通过安装描述文件进行升级,所以今天我们再写个教程给还不知道的小…

贪心只能过样例 loj515

范围$100$ 题解 比较裸的式子 $f[i][j]$表示枚举到第$i$位有没有和为$j$方案 只有$0$或$1$ $f[i][j]f[i-1][j-val*val]$ 答案$\sum\limits f[n][i]$ 范围$1000000$$((1-100)^2 *100)$ 复杂度爆炸,可以滚动数组,得17分 考虑优化,$bitset$, $bitset$表示实际值是否可以凑出 $f[i]…

接口中定义的成员变量是( )。_抽象与接口

原文链接:抽象与接口抽象类抽象类的定义Java可以创建一种类专门用来当作父类,这种类称为“抽象类”。抽象类的作用有点类似“模板”,其目的是要设计者依据它的格式来修改并创建新的类。在Java中可以创建一种类专门用来当做父类,这…

配置phoenix连接hbase_Phoenix视图映射

点击关注上方“知了小巷”,设为“置顶或星标”,第一时间送达干货。Phoenix定位为OLTP和操作型分析(operational analytics),大多用于在线业务,稳定性要求第一位。Phoenix的功能很强大,也很灵活,Phoenix SQL…

python分析数据差异的方法_用Python的两种方法进行方差分析

在进行数据分析时,我们往往会遇到要对某个变量的影响因素进行分析的情况,而影响一事物的因素往往是很多的。比如在化工生产中,有温度、压力、剂量、反应时间等因素。每一因素的改变都有可能影响产品的数量和质量。我们往往要找出对产品质量有…

5 图片 渐变_AI教程!5分钟教你绘制超酷炫的字体效果

图一所示的图片就是我们今天要学的AI教程啦。为什么想起来要做这个呢?因为前两天有两个粉丝私信我问这种效果的字体怎么做。觉得大家应该对这类字体比较感兴趣的,所以今天就给大家出个教程啦。第一眼看上去是不是感觉很酷炫?其实步骤也不多&a…

6的变换_电源学报 | 2020年第3期:quot;高性能双向直流变换技术及其应用quot;专辑征稿启事...

往期精选:【电源学报•热点论文】贝尔福-蒙贝利亚技术大学(UTBM)高非教授-多物理域质子交换膜燃料电池建模仿真及实验测试专辑主编:张云 研究员(天津大学)吴红飞 教授(南京航空航天大学)专辑刊期: 2020年第3期(2020年5月)专辑介绍双向直流变换…

flash大作业一分钟源文件_「百树云课堂」一写作业就像被雷劈,是什么“病”?...

一写作业就闹心,大部分都是因为在培养习惯的时候基础没打好。比如:对时间不敏感、对效率不敏感、专注力低下等等!今天咱就系统说下“习惯培养”的重点。1大部分娃写不完作业,最主要的一点就是对时间不敏感。写一个字,喝…

bzoj5147bzoj2121loj6701 字符串游戏

做不出来杂题,到处找题做 看到$loj$上新出了一道题,觉得很神仙不错, 还记得Censoring吗(一个AC自动机的题) 这个题求最优解,数据范围$150$ 题解 数据范围非常小,首先贪心肯定不行,考虑AC自动机上$dp$? 好吧其实是区间$dp$ 一个直接的想法是维护$f[l][r]0/1$表示是否可以清空$l…

7个相同小球4个不同盒子_【计算启蒙】4个游戏陪娃玩懂“数拆分”,加减法都不用愁!...

前几天我们整理了能锻炼孩子“数-量匹配”知识的家庭生活小游戏:7个家庭数-量匹配小游戏,让孩子摆脱“机械数数”!​mp.weixin.qq.com所以今天,助教就来分享一些借助实物的“数拆分”小游戏吧!已经学会数量对应&#x…

python怎么使用预训练的模型_Keras使用ImageNet上预训练的模型方式

我就废话不多说了,大家还是直接看代码吧! import keras import numpy as np from keras.applications import vgg16, inception_v3, resnet50, mobilenet #Load the VGG model vgg_model vgg16.VGG16(weightsimagenet) #Load the Inception_V3 model in…

NOIP模拟测试49·50「养花·折射·画作·施工·蔬菜·联盟」

一套题 养花 题解 分块\主席树 这里我用的是主席树 查询分段$1-(k-1)$找最大的,能向右找就向右找 for(ll nowl1,nowrk-1;nowl<maxx;nowlk,nowrk,nowrmin(nowr,maxx)){if(ansmod-1) break;chose(rt[r],rt[l-1],nowl,nowr,1,maxx);} 复杂度分析,调和级数$√n*log(n)$ 代码 #in…

宏任务和微任务执行顺序_确保任务的执行顺序

宏任务和微任务执行顺序有时有必要对线程池中的任务施加一定的顺序。 JavaSpecialists通讯的第206期提出了一种这样的情况&#xff1a;我们使用NIO从多个连接中读取数据。 我们需要确保来自给定连接的事件按顺序执行&#xff0c;但是不同连接之间的事件可以自由混合。 我想提出…

c语言中aver是什么意思_Linux系统top命令中的io使用率,到底是什么意思?

最近在做连续数据流的缓冲系统&#xff0c;C语言代码实现后&#xff0c;粗略测试了下&#xff0c;功能上应该没有问题。那么&#xff0c;接下来就该测试性能了。输入 top 命令&#xff0c;的确可以看到一系列 cpu 使用率&#xff0c;其中一个值得注意的子项就是 io 使用率了&am…