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. 仅仅是又多了一本设计书吗 《软件框架设计的艺术》序
  2. java51_Java运行 Unsupported major.minor version 51.0 错误
  3. python常用函数-python常用魔法函数
  4. 阅读好书依然是提升自己的高效方法:兼以作者的身份告诉大家如何选择书,以及高效学习的方法...
  5. Spring AOP 源码分析 - 筛选合适的通知器
  6. poj1781In Danger(约瑟夫) 问题
  7. 搭载恩智浦i.MX 8M Plus处理器的核心板,它来了!
  8. Android中GridView使用总结
  9. Java数据解析---PULL
  10. LeetCode 1721. 交换链表中的节点(快慢指针)
  11. ecshop nginx php-fpm,ecshop在nginx下配置常见问题
  12. 计算机网络学习笔记(25. Cookie技术)
  13. SQL Server系统数据库–模型数据库
  14. CentOS7 添加端口
  15. 基于Golang 的后台管理系统框架
  16. ue4中特殊的Actors,以及Actor与Component的关系
  17. 【广告计算】互联网控制舆论的三个方法
  18. 专访 | 腾讯公司副总裁王巨宏:培养新兴开源力量,为中国技术自主创新添砖加瓦...
  19. 【python 算法接口】使用FastAPI框架快速构建高性能的api服务
  20. 远程连接电脑以及服务器

热门文章

  1. MySQL查询条件中的各种运算符/操作符说明
  2. 反射获取list泛型_Android 从浅到懂使用反射机制
  3. inkscape生成g代码_三点二. 量子对抗生成网络 (Quantum GAN)
  4. rust的权限柜怎么做_潍坊装修知识~二胎家庭不做上下铺,把两张床靠墙放,中间做收纳柜,你感觉怎么样?...
  5. knn算法python代码_K-最近邻分类算法(KNN)及python实现
  6. 【WebRTC---入门篇】(十)NAT
  7. 【音视频安卓开发 (六)】Android GLSurfaceView播放视频
  8. java开发C编译器:结构体的解析和执行
  9. C语言项目:图形马赛克处理技术
  10. linux里面启用无线网卡,linux启用无线网卡上网