js绘制斐波那契颜色圆效果代码
代码语言:html
所属分类:布局界面
代码描述:js绘制斐波那契颜色圆效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .fib{ position:absolute; top:50%; left:50%; height:150px; width:150px; /* border:1px solid blue; */ transform:translate(-50%,-50%); cursor:pointer; } .line{ position:absolute; width:10px; height:200px; top:50%; left:50%; transform:translate(-50%,-50%); transform-origin:50%, 50%; background:#000; opacity:0.8; font-size:0.2em; text-align:center; color:white; } .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 25px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: #04AA6D; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: #04AA6D; cursor: pointer; } #fibVal{ font-weight:bold; } </style> </head> <body > <div class="fib"></div> <div class="slidecontainer"> <input type="range" min="1" max="255" value="150" class="slider" id="myRange"> <p>Fibonacci lines: <span id="fibVal"></span></p> <p>Fibonacci Value: <span id="fibValue"></span></p> </div> <script > let fib = []; let fibDeg = []; let fibNumbers = 255; let rOffset = 0; let gOffset = 0; let bOffset = 0; let slider = document.getElementBy.........完整代码请登录后点击上方下载按钮下载查看
网友评论0