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