前言
1、代码段由HTML、CSS(使用Sass语法)和JavaScript组成,创建一个文本框,用户可以在其中输入内容,并通过点击按钮进行操作。
2、代码段的主要功能是允许用户输入一系列以、
分隔的项,并根据长度对这些项进行排序(中文字符优先),然后将结果重新显示在文本框中。
效果图
html
<div class="box"> <textarea id="idTextarea" rows="8" onclick="handleStop(event)" ondblclick="handleStop(event)" oninput="runInput(event)"></textarea> <div> <button class="btn type1" onclick="handleClear()"> 清 空 </button> <button class="btn type2" onclick="handleConfirm()"> 确 认 </button> </div> </div>
1、
<div class="box">
包含一个文本框和两个按钮。.box
类用于外层容器的样式设置。
2、<textarea id="idTextarea" rows="8">
这是一个多行文本输入框,id="idTextarea"
用于在JavaScript中获取该元素。rows="8"
设置文本框的高度。
2.1、onclick="handleStop(event)"
和ondblclick="handleStop(event)"
事件用于阻止事件冒泡。
2.2、oninput="runInput(event)"
事件在用户输入时触发,并将输入的内容存储在val变量中。
3、<button class="btn type1" onclick="handleClear()">清 空</button>
一个按钮,用于清空文本框的内容。
4、<button class="btn type2" onclick="handleConfirm()">确 认</button>
一个按钮,用于处理并确认用户输入的内容。
style
body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; box-sizing: border-box; .box { width: 68%; display: flex; flex-direction: column; >textarea { resize: none; outline: none; } >div { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; >button { flex: 1; margin: 0; padding: 6px 0px; box-sizing: border-box; font-size: 18px; background-color: transparent; border: none; outline: none; border-radius: 4px; cursor: pointer; } >button:first-child { margin-right: 8px; } >button:last-child { margin-left: 8px; } } } } $btnColorList: #6c6d71, #409eff; @for $i from 1 through length($btnColorList) { .btn.type#{$i} { $color: nth($btnColorList, $i); background: $color; color: #ffffff; &:hover { background: lighten($color, 10%); } &:active { background: darken($color, 10%); } &:disabled { background: lighten($color, 10%); color: white; } } }
1、
body
设置整个页面的样式,将内容居中显示。
2、.box
设置.box
容器的宽度、布局方向(列方向)、内部元素的间距等。
2.1、>textarea
设置文本框无法调整大小且无边框样式。
2.2、>div
设置按钮所在的div,确保按钮之间有一定的间距,并且在页面中水平排列。
3、$btnColorList
定义一个按钮颜色列表,其中包含两个颜色代码#6c6d71
(灰色)和#409eff
(蓝色)。
4、@for
使用循环为.btn
类的不同类型按钮设置背景颜色、文字颜色和不同状态下的样式(悬停、激活和禁用状态)。
JavaScript
let val = ''; function runInput(event) { val = event.target.value; } function handleStop(event) { event.stopPropagation(); } function handleClear() { if (!val) { return alert('无内容可清空'); } else { val = ''; document.getElementById('idTextarea').value = val; } } function handleConfirm() { if (!val) { return alert('请输入内容'); } else { let runSort = (list) => list.sort((a, b) => b.length - a.length); let list = []; let listA = []; let listB = []; let result = undefined; list = val.split('、'); list.forEach(item => { if (/^[A-Za-z]+$/.test(item)) { listB.push(item); } else { listA.push(item); } }); listA = runSort(listA); listB = runSort(listB); result = [...listA, ...listB]; result = result.toString(); result = result.replace(/,/g, '、'); document.getElementById('idTextarea').value = result; } }
1、
let val = '';
定义一个全局变量val,用于存储用户输入的文本内容。
2、runInput(event)
在用户输入时调用,将输入的内容保存到val中。
3、handleStop(event)
用于阻止点击事件的冒泡,确保事件只在当前元素上触发。
4、handleClear()
清空文本框内容的函数。如果文本框为空,弹出警告提示;否则清空文本框内容。
5、handleConfirm()
处理并确认用户输入的内容。如果文本框为空,弹出提示;否则,对内容进行处理。
5.1、将文本内容按、
分割成多个项。
5.2、如果内容只包含英文字符,则放入listB,否则放入listA。
5.3、对listA和listB按长度从长到短排序,并合并两个列表。
5.4、最终将排序后的内容重新组合并显示在文本框中。