emwin按钮按下不变色 点击按钮按钮变色_颜色代码

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



emwin按钮按下不变色 点击按钮按钮变色_渐变色_02

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



emwin按钮按下不变色 点击按钮按钮变色_switch语句_03

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

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

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


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



emwin按钮按下不变色 点击按钮按钮变色_button点击后变色_04

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

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

大概效果如下:



emwin按钮按下不变色 点击按钮按钮变色_button点击后变色_05

(动图1)

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



emwin按钮按下不变色 点击按钮按钮变色_switch语句_06

点击效果如下:



emwin按钮按下不变色 点击按钮按钮变色_switch语句_07

(动图2)

是不是十分简单有趣呢!

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

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

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

执行编辑 | 杜旭升

责任编辑 | 于文博