文本输入特效
1. Placeholder效果
占位符是指在文本框或输入框中，未输入任何内容时提示用户应输入的内容，可以让页面更加友好和简洁。通过JavaScript实现以下代码展示出了一个具有占位符特效的文本输入框：
<input type="text" id="inputText" placeholder="请输入用户名">
<script>
var input = document.getElementById('inputText');
input.addEventListener('focus', function() {
this.placeholder = '';
});
input.addEventListener('blur', function() {
this.placeholder = '请输入用户名';
});
</script>
上述代码通过addEventListener()方法添加了input的事件监听器，当文本框获得焦点时占位符会被清空，失去焦点时占位符又会出现，对用户进行友好的提示。
2. 限制输入框字数
当用户需要在特定的文本框或输入框输入固定字数的内容时，限制输入框字数就显得特别有用。下面的代码通过HTML和JavaScript实现了这一功能：
<input type="text" id="inputNum" maxlength="10">
<script>
var input = document.getElementById('inputNum');
input.addEventListener('input', function() {
var len = this.value.length;
if (len > 10) {
this.value = this.value.substring(0, 10);
}
});
</script>
上述代码通过maxlength属性限制了文本框的最大长度为10个字符，其中addEventListener()方法添加了input的事件监听器，当用户在文本框中输入内容时，脚本会判断文本框中输入的字符数，如果超过最大长度，则截取掉多余字符。
3. 实时搜索效果
在搜索引擎和电商网站中，实时搜索是一种比较常见的功能。以下代码通过JavaScript实现了一个热门商品展示的实时搜索效果：
<input type="text" id="search" placeholder="输入热门商品">
<div id="result"></div>
<script>
var items = ['iPhone 11', 'Matebook X Pro', 'ThinkPad T480s', 'iPad Pro', 'AirPods 2', 'Kindle Paperwhite'];
var search = document.getElementById('search');
var result = document.getElementById('result');
search.addEventListener('input', function() {
var str = '';
for (var i = 0; i < items.length; i++) {
if (items[i].indexOf(this.value) !== -1) {
str += '<p>' + items[i] + '</p>';
}
}
result.innerHTML = str;
});
</script>
上述代码中创建了一个包含热门商品名称的数组items，当用户在输入框中输入文字时，脚本会遍历数组，如果数组中的内容包含了用户输入的文字，则将匹配到的结果展示在页面中，从而使用户更快地找到所需商品。
4. 动态改变文本框字体大小
对于特殊字体或输入较多的文本框，可以根据输入框中的内容来动态调整字体大小，让文字更加美观易读。下面的代码展示了一个字体大小可调的输入框：
<input type="text" id="fontSize" size="30">
<script>
var input = document.getElementById('fontSize');
input.addEventListener('input', function() {
var len = this.value.length;
if (len <= 5) {
this.style.fontSize = '32px';
} else if (len <= 10) {
this.style.fontSize = '24px';
} else {
this.style.fontSize = '18px';
}
});
</script>
上述代码通过addEventListener()方法添加了input的事件监听器，当用户在文本框中输入内容时，脚本会根据输入的字符数动态地改变文本框的字体大小，从而保证了用户输入的内容在页面上的美观程度。
5. 自动提示输入内容
在许多网站和应用程序中，自动提示功能是一种非常有用的功能。以下代码通过JavaScript实现了一个自动提示功能：
<input type="text" id="autoComplete" placeholder="输入首字母进行自动提示">
<script>
var items = ['Apple', 'Banana', 'Cherry', 'Durian', 'Eggplant', 'Fig', 'Grape', 'Honeydew'];
var input = document.getElementById('autoComplete');
input.addEventListener('input', function() {
var len = this.value.length;
var str = '';
if (len > 0) {
for (var i = 0; i < items.length; i++) {
if (items[i].indexOf(this.value) === 0) {
str += '<p>' + items[i] + '</p>';
}
}
}
result.innerHTML = str;
});
</script>
上述代码中创建了一个包含单词的数组items，当用户在输入框中输入单词的首字母时，脚本会在数组中查找匹配项，并将匹配到的结果展示在页面中，从而保证用户输入的单词是正确的。
按钮操作特效
1. 按钮焦点效果
按钮焦点效果可以使按钮在用户操作时更加明显，以下代码展示了一个简单的加减操作按钮的焦点效果：
<button id="minus">-</button>
<input type="text" id="num" value="1">
<button id="plus">+</button>
<script>
var minus = document.getElementById('minus');
var num = document.getElementById('num');
var plus = document.getElementById('plus');
minus.addEventListener('focus', function() {
minus.style.backgroundColor = 'gray';
});
minus.addEventListener('blur', function() {
minus.style.backgroundColor = '';
});
plus.addEventListener('focus', function() {
plus.style.backgroundColor = 'gray';
});
plus.addEventListener('blur', function() {
plus.style.backgroundColor = '';
});
</script>
上述代码中，通过addEventListener()方法为按钮添加了focus和blur的事件监听器，当按钮获得焦点时，按钮的背景色改变，当失去焦点时背景色恢复，从而实现了按钮焦点效果。
2. 防止按钮重复点击
在一些需要提交表单或进行AJAX请求的场景中，可以使用按钮防止重复点击，以下代码展示了一个防止重复点击的按钮：
<button id="submit">提交</button>
<script>
var submit = document.getElementById('submit');
var isSubmitting = false;
submit.addEventListener('click', function() {
if (!isSubmitting) {
isSubmitting = true;
// 进行表单提交或AJAX请求
// ...
// 请求结束后，重置isSubmitting变量
isSubmitting = false;
}
});
</script>
上述代码中通过isSubmitting变量来判断是否正在提交表单或请求AJAX，如果没有提交请求则将其设置为true，并进行表单提交或AJAX请求，在请求结束后将变量设置为false，从而避免了重复提交的问题。
3. 上传文件按钮美化
上传文件功能是许多网站和应用程序必需的功能，可以通过CSS美化上传文件按钮，以下代码展示了一个简单的上传文件按钮的美化：
<label class="upload">
<span>上传文件</span>
<input type="file">
</label>
<style>
.upload {
display: inline-block;
position: relative;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f7f7f7;
padding: 6px 12px;
cursor: pointer;
}
.upload input[type="file"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
上述代码中，在label标签内包含一个span标签和一个input标签，span标签用于显示上传文件按钮的文本，input标签用于实现文件上传功能，在CSS样式中对上传文件按钮进行了相关的样式设置，从而实现了一个简单的上传文件按钮美化。
4. 全选/取消全选按钮
当需要同时选中或取消一组复选框或单选框时，可以使用全选/取消全选按钮。以下代码展示了一个实现全选/取消全选的按钮：
<input type="checkbox" id="selectAll">全选/取消全选
<br>
<input type="checkbox" class="checkbox">A
<input type="checkbox" class="checkbox">B
<input type="checkbox" class="checkbox">C
<input type="checkbox" class="checkbox">D
<script>
var selectAll = document.getElementById('selectAll');
var checkboxes = document.getElementsByClassName('checkbox');
selectAll.addEventListener('click', function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', function() {
var checkedCount = 0;
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedCount++;
}
}
selectAll.checked = checkedCount === checkboxes.length;
});
}
</script>
上述代码中，通过addEventListener()方法为全选/取消全选按钮添加了click事件监听器，当用户点击该按钮时，脚本会将所有的复选框的选中状态改变为与该按钮相同，同时为每个复选框添加了click事件监听器，当用户点击复选框时，脚本会动态更新全选/取消全选按钮的状态。
5. 分页按钮效果
在显示大量数据的页面中，可以使用分页功能来分割数据，以下代码展示了带分页按钮效果的页面：
<div id="pageBtns"></div>
<script>
var currentPage = 1;
var pageSize = 10;
var totalPage = Math.ceil(data.length / pageSize);
var pageBtns = '';
for (var i = 1; i <= totalPage; i++) {
pageBtns += '<button class="pageBtn"' + (i === currentPage ? ' disabled' : '') + '>' + i + '</button>';
}
document.getElementById('pageBtns').innerHTML = pageBtns;
var pageBtn = document.getElementsByClassName('pageBtn');
for (var i = 0; i < pageBtn.length; i++) {
pageBtn[i].addEventListener('click', function() {
currentPage = this.innerText;
for (var i = 0; i < pageBtn.length; i++) {
pageBtn[i].removeAttribute('disabled');
}
this.setAttribute('disabled', 'disabled');
// 显示当前页数据
// ...
});
}
</script>
上述代码中，currentPage和pageSize变量分别表示当前页和每页显示的数据量，totalPage变量表示数据总页数，通过循环创建了分页按钮，并为当前页的按钮添加了disabled属性，表示该按钮不可点击，为每个按钮添加了click事件监听器，当用户点击分页按钮时，脚本会根据当前页码和每页数据量来更新数据，并动态地更新当前页按钮的状态。
6. layui分页效果
layui是一个非常流行的前端UI框架，其中的分页效果十分优秀，以下代码展示了一个使用layui框架的分页效果：
<div id="pageBtns"></div>
<script>
layui.use(['laypage'], function() {
var laypage = layui.laypage;
var currentPage = 1;
var pageSize = 10;
var totalPage = Math.ceil(data.length / pageSize);
laypage.render({
elem: 'pageBtns',
count: data.length,
limit: pageSize,
curr: currentPage,
jump: function(obj, first) {
currentPage = obj.curr;
if (!first) {
// 显示当前页数据
// ...
}
}
});
});
</script>
上述代码中，通过layui的laypage组件来生成分页效果，其中elem属性指定分页容器的dom id，count属性指定总数据数，limit属性指定每页显示的数据量，curr属性指定当前页码，jump回调函数用于处理用户跳转页码的操作，在回调函数中，通过obj.curr获得用户跳转的页码，并根据该页码来更新数据，从而实现了一个借助于layui框架的分页效果。