JS代码点滴

凡哥

花简静 发表于 2024-8-10 10:20
福倒了。。

到了到了

花简静

凡哥 发表于 2024-8-10 12:00
到了到了

这句话太经典，不管是倒装乱字，人脑就会自动归位

凡哥

花简静 发表于 2024-8-10 12:49
这句话太经典，不管是倒装乱字，人脑就会自动归位

挺好的

花简静

<div id="rBox">结果</div>   <script> txtReverse = str => str.split('').reverse().join(''); rBox.innerText = txtReverse('上海自来水来自海上'); </script>  

花简静

结果：上海自来水来自海上

本来想发完就跑的，现在连个跑的图标都找不到。今天又卡得怀疑人生。。

花简静

重复贴子，编了。。

花简静

跑一个

凡哥

十六进制颜色配色工具

红色 ：

ff

绿色 ：

ff

蓝色 ：

ff

凡哥

2024年8月12日 星期一

上楼效果代码

<style>
.pa {
	margin: 30px auto;
	width: fit-content;
	height: fit-content;
}
#mydiv {
	margin-bottom: 20px;
	width: 600px;
	height: 300px;
	border: 1px solid gray;
	background: #fff;
	color: #ffff00;
	font: normal 2em sans-serif;
	text-shadow: 1px 1px 2px #111;
	display: grid;
	place-items: center;
}
</style>

<div class="pa">
	<div id="mydiv">十六进制颜色配色工具</div>
	<p>
		<label for="rng1">红色 ：</label>
		<input id="rng1" class="rng" type="range" value="255" min="0" max="255" />
		<output class="op">ff</output>
	</p>
	<p>
		<label for="rng2">绿色 ：</label>
		<input id="rng2" class="rng" type="range" value="255" min="0" max="255" />
		<output class="op">ff</output>
	</p>
	<p>
		<label for="rng3">蓝色 ：</label>
		<input id="rng3" class="rng" type="range" value="255" min="0" max="255" />
		<output class="op">ff</output>
	</p>
</div>

<script>
var rngs = document.querySelectorAll('.rng'), ops = document.querySelectorAll('.op');
add0 = (str) => str.length < 2 ? str.padStart(2,'0') : str;
rngs.forEach((rng,key) => rng.oninput = () => {
	ops[key].value = add0(parseInt(rng.value).toString(16));
	mydiv.textContent = mydiv.style.background = `#${ops[0].value}${ops[1].value}${ops[2].value}`;
});
</script>

花简静

感觉看到滑竿没那么怕了。。
还是要仔细研究一下代码，不知道能不能看懂