button点击后变色_HTML | 两只“变色龙”带你玩转色彩变幻

许多小伙伴觉得上次“技术贴”的密码锁比较晦涩难懂，那么这一次小编来带领大家领略更简单有趣的JS和html！

颜色是我们生活最不可或缺的部分，每天睁开双眼第一件事就是感知光与颜色的存在，这次小编设置了两个简单的按钮，通过点击可使背景发生颜色的变化，每一次颜色变化都是漂亮美丽的渐变色。

(变色龙一号 / 变色龙二号)

点击变色龙二号则会使变色龙一号发现渐变色反应，而他的原理也是十分简单：

onclick="count2()"class="b2">变色龙2

点击变色龙二号，通过onclick来运行count2()函数，那么count2()函数里面是什么呢？

就是非常简单的switch语句！先以var定义一个变量a=0开始进行计数，当a在1~5的范围内时，对应的颜色不尽相同，switch语句执行完后，a++进行自增变化，而在a=5时，a又重新等于0，以此达到在a在1~5的范围内循环。

Document.getElementById()函数是获得对应ID名称里的第一个对象，获得对象后对其样式里的background进行颜色设定，达到变色目的。

大概效果如下：

(动图1)

考虑到大家接触到switch语句比较少，不理解也没有关系，这里变色龙一号的点击函数内是大家熟知的ifelse语句，他的效果和switch语句相同：

点击效果如下：

(动图2)

是不是十分简单有趣呢！

那么想必大家一定早就想问这个十分少见的css样式大兄弟了，你从哪里来？

background = "linear-gradient(to top,pink,yellow)";

这是渐变颜色样式，第一个参数是控制颜色变化方向，to top即是从下往上渐变，如果to right、或者to left就是从左往右或从右往左，甚至是可以填上你喜欢的角度(deg)，而后面的参数是颜色代码，必须填两个，一个起始颜色一个终止颜色，如果超过两个以上也可以，皆以第一个颜色为起始色，最后一个颜色为终止色。

执行编辑 | 杜旭升

责任编辑 | 于文博