Hello，程序員那些事又與大家見(jiàn)面了！

JS簡(jiǎn)易日歷

先給大家看一下效果：

大家可能會(huì)覺(jué)得，唉~好像跟上節(jié)課講的選項(xiàng)卡差不多，就是十二個(gè)按鈕，改變this的class，同時(shí)下面放十二個(gè)div，每次顯示其中一個(gè)，這樣想沒(méi)錯(cuò)，但是大家想想，我們這個(gè)是做年歷，只有十二個(gè)月，要是我們做萬(wàn)年歷呢？那就很麻煩了，所以我們換一種方式來(lái)做。

我們先來(lái)檢查一下元素：

其實(shí)這里面顯示的只有一個(gè)div

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

下面我們就來(lái)看一下，怎么改變里面的文字(這就要用到我們上節(jié)課提到的innerHTML)

首先還是看布局：

實(shí)際上布局并不復(fù)雜,就是一系列的?li?，并且有一個(gè)的?class?是?active，大家結(jié)合我們上節(jié)課講的一看就知道是怎么回事，下面還有一個(gè)?div?，這個(gè)?div?就是我們來(lái)放置這些文字的。

我們先把上面這十二個(gè)月的東西做了：

跟選項(xiàng)卡一樣，先把所有的 class 都去掉，然后只給 this 加一個(gè)‘a(chǎn)ctive’的 class ，這樣上半部分就完成了，當(dāng)然下面的文字還是沒(méi)有變的。

其實(shí)改變下面的也很簡(jiǎn)單，就是給下面的 div 設(shè)置 innerHTML ：

首先就是設(shè)置幾月份的活動(dòng)，不可能每個(gè)月都是一月，但是有一個(gè)問(wèn)題，我們?cè)趺粗赖暗?li 是第幾個(gè)月的呢？

我們可以給所有的 li 都編個(gè)號(hào)，也就是在循環(huán)中加一個(gè) index 的屬性：

然后把1改為 this 的編號(hào)，說(shuō)到這里不得不提到字符串的連接了：

字符串連接

把要連接的字符串放在單引號(hào)里面，用加號(hào)連接起來(lái)：

數(shù)字不用加單引號(hào)：

但是有一點(diǎn)要注意一下：

這樣寫(xiě)大家覺(jué)得會(huì)彈出什么呢？

“abc17def”嗎？實(shí)際上并不是：

這其實(shí)與數(shù)學(xué)中的加減法類似，它有優(yōu)先級(jí)的區(qū)分，前面的字符串先與12進(jìn)行了字符串加法，然后“abc12”這個(gè)字符串再跟5相加，最后出來(lái)就是上面顯示的咯~

那么如果我們想要輸出“abc17def”該怎么寫(xiě)呢：跟數(shù)學(xué)一樣，直接加一個(gè)括號(hào)就可以咯~

好，咱們回到剛剛的問(wèn)題，用字符串連接來(lái)實(shí)現(xiàn)月份的改變：

因?yàn)閯倓偟难h(huán)中是從零開(kāi)始的，而月份是從一開(kāi)始的，所以我們這里要加一：

現(xiàn)在月份就可以正常改變了，下面的文字怎么改變呢？

用最笨的辦法當(dāng)然就是用 if ，判斷不同的月份出現(xiàn)不同的文字，但是這樣太麻煩了。我們可以用JS里的數(shù)組來(lái)完成：

數(shù)組：

數(shù)組里面也可以放字符串，所以我們就用數(shù)組來(lái)改變文字：

簡(jiǎn)易日歷到這里就講完了，相信大家也學(xué)到了很多，我們下期再見(jiàn)！

官方QQ認(rèn)證空間：2256167997

郵箱：qyxmtzx@163.com

官方新浪微博@中北大學(xué)大數(shù)據(jù)學(xué)院

主編：?阮臻

責(zé)編：?姜鑫源

本期編輯：實(shí)習(xí)編輯?韓康澤?魏孟梁

總結(jié)

以上是生活随笔為你收集整理的如何在程序中不用加号实现加法_程序员那些事 | JavaScript基础（六）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。