代码分html、css、js三个部分。
HTML:
去掉css和js,只留下html:
加上以上代码即可使用boostrap框架,当class = "fa fa-twitter"时出现推特的logo,当class = "fa fa-tumblr"时出现Tumblr的logo
css:
给网页加上css样式。
JS:
根据项目要求,名言内容和作者姓名都是随机的,两者之间没有一对一的对应关系,先设定一些名言内容和作者姓名,存储在两个数组中。
取0到名言(作者)数组长度的随机数并取整。
修改HTML DOM对象,随机修改名言和作者的内容。
由于点击new quote不仅名言和作者内容要随机改变,字体颜色和背景颜色也要随机改变,并且字体颜色和背景颜色保持一致。
html中的color值有三种设置方法:
①规定颜色值为颜色名称的颜色(比如red)
②规定颜色值为十六进制值的颜色(比如#ff0000)
③规定颜色值为RGB代码的颜色(比如rgb(255,0,0))
所以color1,2,3分别设置RGB的三个数值。
同样用修改HTML DOM对象的方法,更改相应位置的颜色。
修改内容和颜色的整体js代码。
代码运行结果:
领取专属 10元无门槛券
私享最新 技术干货