JavaScript网页交互特效在线切换背景颜色
在线背景颜色切换的功能，算是前端交互里比较经典的小玩法了，代码不多，但挺能提升网页的互动感。这个案例就教你怎么用JavaScript监听输入框里的颜色代码，比如#FF0000或rgb(255,0,0)，直接改网页背景，响应也快，体验还不错。
用到了addEventListener来监听input事件，每次你一输颜色，它就尝试改背景。如果你输错了，比如少打了个字符，还能弹个alert提示，避免页面出错。验证颜色格式的函数也有，简单用正则表达式过一遍就行。
实用性方面，像你要做一个个性化设置页，或者在线主题切换，拿来做基础交互挺合适。如果再加个颜色选择器，比如<input type="color">，那用户体验会更直观。
代码结构也清晰，HTML一块输入框，JS一段逻辑，调试起来也方便。建议新手可以试着扩展下，比如让背景色渐变、自动保存颜色设置等等，玩法多。
你可以从改变背景颜色.txt里直接看源码，学习下怎么和 DOM 交互，蛮适合入门练手的。
文件大小：106.75KB
评论区