MENU效果图HtmlJavaScriptStyle解析效果图Htmldivclassmain/divinputtyperangeidrangevalue0pidpc0%/pJavaScriptfunctioninit(){letmaindocument.querySelector(.main);letrangedocument.querySelector(#range);letpcdocument.querySelector(#pc);for(let i0;i100;i){letspandocument.createElement(span);span.style.transformrotate(${i /100*360}deg);main.appendChild(span);}range.addEventListener(input,(){range.style.backgroundSize${range.value}%100%;pc.innerHTML${range.value}%;chColor(range.value);});functionchColor(val){for(let i0;imain.children.length;i){if(ival){main.children[i].style.setProperty(--bg,hsl(${i /100*360},100%,50%));main.children[i].style.setProperty(--sg,hsl(${i /100*360},100%,50%));}else{main.children[i].style.setProperty(--bg,#000000);main.children[i].style.setProperty(--sg,transparent);}}}}init();Style*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#333333;display:flex;width:100%;height:100vh;justify-content:center;align-items:center;}.main{width:30vw;height:30vw;position:absolute;display:flex;justify-content:start;align-items:center;}input[typerange]{--c:#1e90ff;width:30vw;height:1vw;position:absolute;transform:translateY(20vw);appearance:none;background:linear-gradient(var(--c),var(--c))no-repeat,#000000;background-size:0 100%;border-radius:0.5vw;cursor:pointer;}input[typerange]::-webkit-slider-thumb{width:2vw;height:2vw;appearance:none;background:var(--c);border-radius:50%;box-shadow:0 0 1vw #ffffff,0 0 2vw #ffffff;}#pc{color:#ffffff;font-size:8vw;font-family:Arial,Helvetica,sans-serif;text-shadow:0.2vw 0.2vw 0 gray,0 0 1vw #1e90ff,0 0 2vw #1e90ff,0 0 4vw #1e90ff;}.main span{--bg:#000000;--sg:transparent;position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:start;}.main span::after{content:;width:0.1vw;height:2vw;position:absolute;background:var(--bg);box-shadow:0 0 0.5vwvar(--sg),0 0 1vwvar(--sg),0 0 2vwvar(--sg);transition:0.8s linear;}解析代码创建了一个简单的界面其中有一个可拖动的滑块(range input)滑块的值会导致一系列旋转的条状元素的颜色和长度发生变化。html一个div元素类名为main用于容纳条状元素。一个input元素类型为range具有id为range用于控制条状元素的变化。一个p元素id为pc用于显示滑块的值。style一些基本的样式设置如去除默认的内外边距设置全局的盒模型为边框模型背景颜色等。设置主体的背景颜色为深灰色。设置.main元素的样式定义了它的大小和位置等。设置input[type‘range’]和其thumb(滑块拖动的圆球)的样式。设置#pc元素的样式定义了它的字体大小、颜色和阴影效果。设置.main span元素的样式定义了条状元素的样式包括颜色、阴影等。JavaScriptinit()函数用于初始化页面获取相关元素并设置滑块的事件监听器。在循环中通过创建span元素的方式创建了一系列条状元素并将它们添加到.main元素中。滑块的输入事件监听器会根据滑块的值改变背景的大小、滑块下方文字的内容并调用chColor()函数改变条状元素的颜色。chColor()函数根据传入的值改变条状元素的背景颜色使用HSL颜色空间从黑色到彩虹色渐变。总体来说这段代码实现了一个简单的滑块控制条状元素颜色和长度变化的效果。