许多小伙伴觉得上次“技术贴”的密码锁比较晦涩难懂,那么这一次小编来带领大家领略更简单有趣的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),而后面的参数是颜色代码,必须填两个,一个起始颜色一个终止颜色,如果超过两个以上也可以,皆以第一个颜色为起始色,最后一个颜色为终止色。
执行编辑 | 杜旭升
责任编辑 | 于文博