js逐步实现原生控制系统(html逻辑 css逻辑 js逻辑)

html第一部分:

		
			Update CSS Variables with JS
		
Spacing:Blur:Base Color
		

			
			

				{spacing:"lw_spacing">#ffc600}
			

			

				{blur:"lw_blur">10px}
			

			

				{base:"lw_base">10px}
			

		
"./img1.jpg" alt="">

效果:

注意点:会表单就行了.

css部分；

*{padding: 0px;margin: 0px;} :root { --base:#ffc600; --spacing:10px; --blur:10px; } span { color: var(--base); } img { width: 1125px; height: 549px; padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } body { text-align: center; background: #193549; color: white; font-family:'helvetica neue',sans-serif; font-weight: 100; font-size: 30px; } .controls { margin-bottom: 50px; } input { width: 100px; } .result { display: flex; flex-direction: row; justify-content: center; color: var(--base); } .showText { margin: 0px 25px 50px 25px; } 

效果：

js部分(实现逻辑): 第一:先获取到表单的所有的input标签,用来实现动态的,这里注意一下,

这三个最后一个是用改变事件而不是移动事件.注意一下. 第二：触发事件了先看看是px的还是颜色的,这里注意一下,颜色不用后缀. 第三；然后动态的实现效果的变化. 第四；数据也相对应的变化。