本文通过四个实例深入解析了前端开发中的关键技术，包括评论发表的敏感词过滤、表单验证、CSS动画及文字描边闪烁效果的实现，旨在提升前端开发者的实践能力。
01-案例之评论发表之屏蔽关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap{
width:600px;
height:600px;
margin:50px auto;
position:relative;
}
#wrap textarea{
width:100%;
height:80px;
padding:10px;
font-size:18px;
resize:none;
box-shadow: 5px 2px 3px 1px #ccc;
}
#wrap #btn{
width:50px;
height:25px;
font-size:15px;
color:white;
border:none;
outline: none;
background:lightblue;
text-align: center;
line-height: 25px;
cursor: pointer;
position:absolute;
top:70px;
right:0;
z-index:3;
}
#wrap #btn:hover{
box-shadow: .5px .5px .5px #ccc;
}
#wrap #show{
width:100%;
margin-left:-15px;
}
#wrap #list li{
border-bottom: .5px solid #ccc;
width:100%;
/*height:100px;*/
list-style: none;
position:relative;
}
#wrap #list li .user{
font-size:14px;
color:lightblue;
}
#wrap #list li .time{
font-size:13px;
margin-left:15px;
color:#aaa;
}
#wrap #list li .del{
font-size:14px;
color:#777;
position: absolute;
top:0;
right:10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<textarea name="txt" id="txt" ></textarea>
<input type="button" value="发表" id="btn">
<div id="show">
<ul id="list">
<!--<li>-->
<!--<span class="user">匿名用户</span>-->
<!--<span class="time">2018-09-26</span>-->
<!--<p>这里是评论</p>-->
<!---->
<!--</li>-->
<!--<li>-->
<!--<span class="user">匿名用户</span>-->
<!--<span class="time">2018-09-26</span>-->
<!--<p>这里是评论</p>-->
<!--<span class="del">删除</span>-->
<!--</li>-->
</ul>
</div>
</div>
<script>
(function(){
var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oList = document.getElementById('list');
var reg = /垃(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*圾|傻(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*逼|操|尼(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*玛|你(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*妈|你(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*爸|智(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*障|废(\.|,|。|，|、|;|'|"|\/|\\|\‘|\“|\[|\]|\s)*物/;
oBtn.onclick = function () {
var val = oTxt.value;
if( val ){
//$n 代表正则中每个字段的第n个括号的匹配
val = val.replace( reg,function($0){
str = '';
for(var i=0;i<$0.length;i++)str += '*'
return str;
} );
oTxt.value = '';
var oDate = new Date();
var year = oDate.getFullYear();
var mon = oDate.getMonth()+1;
var day = oDate.getDate();
var hours = oDate.getHours();
var min = oDate.getMinutes();
var sec = oDate.getSeconds();
mon = mon>=10?mon:'0'+mon;
day = day>=10?day:'0'+day;
hours = hours>=10?hours:'0'+hours;
min = min>=10?min:'0'+min;
sec = sec>=10?sec:'0'+sec;
var strs = year + '-' + mon + '-' + day + '' + hours + ':' + min + ':' + sec;
//增加标签元素
var oLi = document.createElement('li');
var oSpan = document.createElement('span');
oLi.innerHTML = '<li><span class="user">匿名用户</span><span class="time">'+ strs +'</span><p>'+ val +'</p></li>';
//给oSpan声明类名和文本
oSpan.className = 'del';
oSpan.innerHTML = '删除';
//将oSpan添加到oLi内
oLi.appendChild(oSpan);
//设置删除按钮事件
oSpan.onclick = function(){
//寻找span标签的父级的父级并调用removeChild方法删除评论
oSpan.parentNode.parentNode.removeChild(this.parentNode);
};
//oList调用insertBefore方法将用户评论插入
//insertBefore(): 第一个参数:要插入的元素，第二个参数:在哪个元素前插入
oList.insertBefore(oLi,oList.children[0]);
}
}
})()
</script>
</body>
</html>
02-案例之表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
#wrap{
width:450px;
height:500px;
background:#00ccff;
margin:10px auto;
border-radius:10px;
position: relative;
}
#wrap h1{
color:#fff;
font-size:24px;
height:40px;
line-height:40px;
text-align: center;
background:#0099cc;
}
/* 处理用户输入规则错误时的样式 */
#wrap div.wrong{
height:63px;
}
/* 处理用户输入正确时的样式 */
#wrap div.right input{
border:1px solid #00cc00;
}
#wrap div{
height:42px;
margin:0 auto;
overflow: hidden;
margin-top:15px;
transition:height 1s;
}
#wrap input{
display: block;
margin:0px auto;
width:330px;
height:42px;
font-size:15px;
text-indent: 10px;
border:1px solid #ddd;
outline:none;
}
#wrap div span{
font-size:13px;
color:red;
}
#wrap div .btn{
background:lightgreen;
outline:none;
border:none;
cursor: pointer;
font-size:18px;
letter-spacing: 1px;
color:#777;
border-radius: 5px;
transition:letter-spacing 1s,background-color 1s,border-radius 2s,width 2s,color 1s;
}
#wrap div .btn:hover{
background: lightgoldenrodyellow;
width:250px;
color:lightcoral;
letter-spacing: 5px;
border-radius: 30px;
}
#wrap #tip{
width:110px;
height:40px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:15px;
line-height: 40px;
text-align: center;
position:absolute;
top:25%;
left:35%;
z-index:-1;
transition:top 1s,opacity 2s;
opacity: 0;
}
#wrap #tip.show{
top:45%;
z-index: 1;
opacity: 1;
}
</style>
</head>
<body>
<div id="wrap">
<h1>账号注册</h1>
<div>
<input type="text" class='match' name="user" placeholder="username">
<span>格式错误：账号可包含字母/数字/下划线，长度为6-18位，切不能以数字开头</span>
</div>
<div>
<input type="password" class='match' name="pwd" placeholder="password">
<span>格式错误：密码不能含有空格，长度为6-18位</span>
</div>
<div >
<input type="password" name="pwd2" placeholder="password again">
<span>格式错误：两次密码输入不一致！</span>
</div>
<div>
<input type="text" class='match' name="tel" placeholder="telephone number ">
<span>格式错误：手机号不正确！</span>
</div>
<div>
<input type="text" class='match' name="mail" placeholder="e-mail">
<span>格式错误：邮箱格式不正确！</span>
</div>
<div>
<input type="text" class='match' name="IDcard" placeholder="Id-card">
<span>格式错误：身份证号不正确！</span>
</div>
<div>
<input type="submit" value="立即注册" class="btn">
</div>
<p id="tip">请先输入密码!</p>
</div>
<script>
(function () {
var reg = {
'user':/^[a-zA-Z]\w{5,17}$/,
'pwd':/^\w{6,18}$/,
'tel':/^1[345678]\d{9}$/,
'mail' : /^[0-9a-zA-Z_]+@[0-9a-zA-Z]+(\.[a-zA-Z]+){1,3}$/,
'IDcard':/^[1-9]\d{16}[0-9xX]$/,
};
var oInput = document.getElementsByClassName('match');
// 构造一个存放字符串的数组
var inpReg = ['user','pwd','tel','mail','IDcard'];
// 获取密码框以及再次输入密码框
var oPwd1 = document.getElementsByName('pwd')[0];
var oPwd2 = document.getElementsByName('pwd2')[0];
var oTip = document.getElementById('tip');
var index = 0;
// 遍历每个 input事件 对其进行正则匹配
for(var i=0;i<oInput.length;i++){
oInput[i].index = i;
// onblur 失去焦点事件
oInput[i].onblur = function(){
var val = this.value;
if ( val ){
if ( reg[inpReg[this.index]].test(val) ){
this.parentNode.className = 'right';
}else{
this.parentNode.className = 'wrong';
this.focus()
}
}else{
this.parentNode.className = ''
}
}
}
// 单独对两次密码匹配进行分析
oPwd2.onfocus = function () {
if( !oPwd1.value ){
oTip.className = 'show';
setTimeout(function(){
oTip.className = '';
oPwd1.focus();
},2000)
}
};
oPwd2.onblur = function(){
var val = this.value;
if ( val ){
if ( val != oPwd1.value ){
this.parentNode.className = 'wrong';
oPwd1.focus()
}else{
this.parentNode.className = 'right';
}
}
}
})();
</script>
</body>
</html>
03-案例之animation动画
01-css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:200px;
height:200px;
margin:0 auto;
cursor: pointer;
text-align: center;
line-height: 190px;
font-size:18px;
color:white;
/*兼容*/
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background:lightcoral;
position: absolute;
top:0;
left:0;
/*
执行动画
animation: 参数1 参数2 参数3
参数1: 要执行动画的名字
参数2: 完成动画过程时间
参数3: 规定动画执行的状态,匀速匀加速等等
linear 匀速
ease 匀减速
ease-in 匀加速
ease-in-out 匀减速再匀加速
animation 拆分属性(用于js操作事件中)
1.animation-name:demo
2.animation-duration:8s;
3.animation-delay:2s;
4.animation-timing-function:linear
5.animation-iteration-count:infinite; 动画循环次数,infinite无限循环
6.animation-direction:alternate; 动画结束后反向再进行一遍动画
7.animation-play-state:; 动画状态 paused暂停 running运行
8.animation-fill-mode:forwards; 保留最后一帧的动画，让元素在最后一帧位置停止
backwards 保留最开始一帧的动画,...
both 效果和forwards一样
前提: 不是无限循环
*/
animation:demo 10s 2s ease-in-out infinite alternate running;
}
/*
定义动画
@keyframs demo {}不能加 ';'
设置每个阶段元素在的位置
from{} 等于 0%
to{} 等于 100%
动画即元素或者图片每一帧的状态都在更改
*/
@keyframes demo {
/*自定义的五个关键帧*/
/*在这一帧的时候元素的状态*/
0%{top:0;left:0;background:lightblue;border-radius: 50px}
25%{top:0;left:500px;background:lightgreen;border-radius: 20px}
50%{top:500px;left:500px;background:lightseagreen;border-radius: 70px}
75%{top:500px;left:0px;background:lightsalmon;border-radius: 100px}
100%{top:0;left:0;background:lightcoral;border-radius: 30px}
}
#box.click{
animation-play-state:paused;
}
</style>
</head>
<body>
<div id="box">
点我暂停
</div>
<script>
// 点击元素暂停动画，再次点击继续动画
var oBox = document.getElementById('box');
var active = true;
oBox.onclick = function(){
if (active){
this.className = 'click';
active = false
}else{
this.className = '';
active = true;
}
}
</script>
</body>
</html>
04-案例之文字描边闪烁
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background:lightblue;
}
div{
width:300px;
height:100px;
font-size:40px;
margin:100px auto;
color:lightsalmon;
text-shadow: 0px 0px 0px orangered;
animation:demo 2s linear infinite alternate running;
}
@keyframes demo {
0%{ text-shadow: 0px 0px 10px lightcoral;}
15%{ text-shadow: 0px 0px 20px lightseagreen;}
30%{ text-shadow: 0px 0px 30px lightslategrey;}
45%{ text-shadow: 0px 0px 40px orange;}
60%{ text-shadow: 0px 0px 50px lightcoral;}
75%{text-shadow: 0px 0px 60px lightslategray;}
90%{text-shadow: 0px 0px 70px lightsalmon;}
100%{text-shadow: 0px 0px 80px lightgreen;}
}
</style>
</head>
<body>
<div>半生戎马半生歌</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
