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

JS简易日历

先给大家看一下效果:

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

我们先来检查一下元素:

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

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

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

首先还是看布局:

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

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

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

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

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

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

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

字符串连接

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

数字不用加单引号:

但是有一点要注意一下:

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

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

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

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

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

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

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

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

数组:

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

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

官方QQ认证空间:2256167997

邮箱:qyxmtzx@163.com

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

主编: 阮臻

责编: 姜鑫源

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

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

  1. 所谓”不用加号的加法运算“

    今天一个小朋友问了我一个很有意思的问题:"不用加号的加法运算",大抵就是说,"诶-网上有人不用[+]就可以实现加法哟-" 这个问题以前大学的时候玩过,是一个很有 ...

  2. SQL Server 2005 - 如何在预存程序中调用另外一个预存程序

    要在一个预存程序中调用另外一个预存程序,可以使用下列两种方式之一进行调用:  <?xml:namespace prefix = o /> EXECUTE <欲执行之预存程序的名称&g ...

  3. 微信小程序中嵌套html_在微信小程序中渲染HTML内容3种解决方案及分析与问题解决...

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲 ...

  4. java源程序中区分大小写_Java程序中不区分大小写字母。( )_学小易找答案

    [单选题]下列选项中,不属于Java语言特点的一项是( ) [单选题]丝绸时髦了,人造纤维过时了. [单选题]<葛生>出自<诗经>的: [多选题]keyshot渲染的光源是利用 ...

  5. 一个java程序中什么是主类_下列哪个是Java应用程序主类中正确的main方法?_学小易找答案...

    [判断题]用佛尔哈德法测定Ag + 时,不用先除去氮的低价氧化物.汞盐等杂质. [单选题]下列哪个是Java应用程序主类中正确的main方法? [判断题]javac.exe 命令文件存放在 JDK 安 ...

  6. 列举窗体控制台应用程序中的3中控件_今天来点枯燥的,Visual C#的Windows窗体运行过程...

    我们上一期只是在windows窗体上放了三个控件,并编写了一段小程序,实现了触发窗体上的按钮,使得标签上的内容改变,并能够结束运行当中的程序: 然而,我们在编写代码窗口时,windows窗体自动嵌入了 ...

  7. c语言程序中的基本功能,c语言程序中的基本功能模块为什么?

    c语言程序中的基本功能模块为"函数".一个C语言程序可以由一个主函数和若干个函数构成:一个大的应用程序一般应该分为多个程序模块,每一个模块用来实现一个功能,而模块的功能是由函数完成 ...

  8. 剑指offer不用加减乘除做加法_剑指Offer-不用加减乘除做加法

    题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 思路 思路一: 位运算 思路二: 递归 思路三: 调用Integer的sum方法 思路四: 自增自减 代码实现 ...

  9. 微信小程序中嵌套html_在微信小程序中渲染HTML内容的方法示例

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...

最新文章

  1. 浙大赵俊博:重新审视模型 vs 数据这个问题!
  2. HTML的标签描述11
  3. 从互联网大厂裸辞 500 天后,我发生哪些变化?
  4. Flask 备注一(单元测试,Debugger, Logger)
  5. QQ 相册后台存储架构重构与跨 IDC 容灾实践
  6. RocketMQ一行代码造成消息发送失败
  7. 2018年各大互联网前端面试题二(滴滴打车)
  8. restful 风格api
  9. linux SNAT、DNAT目标函数
  10. linux之rename命令
  11. 多元回归f检验matlab,matlab进行F检验
  12. 钢琴家以前是学计算机的,奇特的钢琴家——裘元朴
  13. 今日头条极速版自动寻找-阅读惊喜奖励
  14. 15首史上最经典摇滚柔情歌曲
  15. 共享单车来了,自行车道没了
  16. java文件写入不覆盖_java写入文件不覆盖写入_Java写入文件–用Java写入文件的4种方法...
  17. 2021-06-29 连续非空子序列
  18. j3455文件服务器,看烦了千篇一律的J3455?让黑群晖显示真实的CPU信息
  19. 浙大PTA-Python题库 编程题第五章(5-1~5-11)题解
  20. 2011 Asia Beijing Regional Online Contest-1004 hdu4043 FXTZ II

热门文章

  1. kl散度的理解_以曲率的视角理解自然梯度优化
  2. 部署项目,所谓“部署”到底是在干什么?
  3. 混合模式商城的可经销商品池
  4. micropython stm32f030_24C02 读写代码,基于STM32F030
  5. 计算机网络的拓扑模型,基于复杂网络模型的计算机网络拓扑结构研究
  6. C 与 C 的真正区别在哪里?
  7. azure mysql sql,UiPath连接Azure Sql Server数据库
  8. 先装vs还是先装sql_【家装话题】装修师先装门还是先装地板?
  9. pb 调用虹软_python调用虹软2.0
  10. PoE交换机的4种连接方法