HTML 、JS、CSS 添加控制面板例子---01_html网页中插入控制面板-CSDN博客

本文链接：https://blog.csdn.net/aganliang/article/details/108555365

本文详细介绍了一种利用CSS进行网页元素样式定义及交互设计的方法，包括如何使用不同选择器来定位元素，设置字体大小、颜色和背景，以及通过事件监听实现动态效果更新。文章还展示了如何构建控制面板，实现数据展示和用户输入反馈，如滑动条实时更新地图过滤条件，以及选项切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h1 {
    font-size: 20px;
    line-height: 30px;
};

h2 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}

a {
    text-decoration: none;
    color: #2dc4b2;
};

#console {
    position: absolute;
    width: 300px;
    top: 30px;
    margin: 10px;
    padding: 10px 20px;
    background-color: white;
};

.session {
  margin-bottom: 20px;
}

.row {
    display: block;
    height: 12px;
    width: 100%;
}

.colors {
  background: linear-gradient(to right, #2dc4b2, #3bb3c3, #669ec4, #8b88b6, #a2719b, #aa5e79);
  margin-bottom: 5px;
}

.label {
  width: 15%;
  display: inline-block;
  text-align: center;
}

<div id="console">
	<h1>控制面板测试</h1>
	<p>data from nyc</p>
	<div class='session'>
	  <h2>Casualty</h2>
	  <div class='row colors'>
	  </div>
	  <div class='row  labels'>
	    <div class='label'>0</div>
	    <div class='label'>1</div>
	    <div class='label'>2</div>
	    <div class='label'>3</div>
	    <div class='label'>4</div>
	    <div class='label '>5+</div>
	  </div>	 
	</div>

	<div class="session" id="sliderbar">
		<h2>Hour: <label id='active-hour'>12PM</label></h2>
		<input type="range" id="slider" class="row" min="0" max="23" step="1" value="12">
	</div>
	
	<div class='session'>
	  <h2>Day of the week</h2>
	  <div class='row' id='filters'>
	    <input id='all' type='radio' name='toggle' value='all' checked='checked'>
	    <label for='all'>All</label>
	    <input id='weekday' type='radio' name='toggle' value='weekday'>
	    <label for='weekday'>Weekday</label>
	    <input id='weekend' type='radio' name='toggle' value='weekend'>
	    <label for='weekend'>Weekend</label>
	  </div>
	</div>
</div>

document.getElementById('slider').addEventListener('input', function(e) {
  var hour = parseInt(e.target.value);
  // update the map
  map.setFilter('collisions', ['==', ['number', ['get', 'Hour']], hour]);

  // converting 0-23 hour to AMPM format
  var ampm = hour >= 12 ? '下午' : '上午';
  var hour12 = hour % 12 ? hour % 12 : 12;

  // update text in the UI
  document.getElementById('active-hour').innerText = hour12 + ampm;
});