利用input类型：range设置简单调色板

最新推荐文章于 2023-01-17 16:38:06 发布

weixin_30341745

最新推荐文章于 2023-01-17 16:38:06 发布

阅读量405

点赞数

原文链接：http://www.cnblogs.com/wcx-20151115-hzz/p/10098452.html

版权

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>颜色跟随变化</title>
　　　　<style type="text/css">
　　　　　　div{
　　　　　　　　width: 100px;
　　　　　　　　height: 100px;
　　　　　　　　border: 1px solid cyan;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="show"></div>
　　　　
　　　　
　　　　
　　　　R:<input type="range" value="0" min="0" max="255" /><span>0</span><br />
　　　　G:<input type="range" value="0" min="0" max="255" /><span>0</span><br />
　　　　B:<input type="range" value="0" min="0" max="255" /><span>0</span><br />

　　　　<script>
　　　　　　//dom操作
　　　　　　//通过id获取div
　　　　　　var show = document.getElementById("show");
　　　　　　//通过标签名获取input、span
　　　　　　var inputs = document.getElementsByTagName("input");
　　　　　　var spans = document.getElementsByTagName("span");
　　　　　　//通过let关键字定义变量，只在for结构里起作用，类似闭包效果
　　　　　　//循环添加事件：元素添加的事件名是相同的，并且事件的处理函数是一样的
　　　　　　for(let i =0; i<inputs.length;i++){
　　　　　　　　inputs[i].onchange = function(){
　　　　　　　　　　spans[i].innerHTML = inputs[i].value;
　　　　　　　　　　show.style.backgroundColor = "rgb(" + inputs[0].value+ "," + inputs[1].value + "," + inputs[2].value + ")";
　　　　　　　　}
　　　　　　}

　　　　</script>
　　</body>
</html>

转载于:https://www.cnblogs.com/wcx-20151115-hzz/p/10098452.html

weixin_30341745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用input类型：range设置简单调色板

<!DOCTYPE html>　　<html> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title>颜色跟随变化</title> 　　　　<style type="text/css"> 　　　　　　div{ 　　　　　　　　width: 100px...
复制链接

扫一扫