整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
知识点：
1、事件选择为Onfocus、Onblur
2、获取属性值 标签.属性; 获取样式值 标签.style.样式；
3、操作属性 标签.属性=”值”; 操作样式值 标签.style.样式=”值”;
4、this用在标签的事件中，代表触发该事件的标签本身，可以作为参数传递；另外，在函数中，或者单独写this，代表该网页本身，比如this.close();
完整源码：
请输入：<input name="loginid" id="loginid" value="请输入" style="color:gray;" onfocus="OnTextFocus()" onblur="OnTextBlur()" /><br />
请输入：<input value="请输入" style="color:gray;" onfocus="OnReTextFocus(this);" onblur="OnReTextBlur(this);" />
</body>
<script language="javascript" type="text/javascript">
//获取焦点事件
function OnTextFocus(){
var loginid=document.getElementById("loginid");
if(loginid.value=="请输入"){
loginid.value="";
loginid.style.color="black";
}
}
//失去焦点事件
function OnTextBlur(){
var loginid=document.getElementById("loginid");
if(loginid.value=="")
{
loginid.value="请输入";
loginid.style.color="gray";
}
}
//验证特效改写
function OnReTextFocus(obj){
if(obj.value=="请输入"){
obj.value="";
obj.style.color="black";
}
}
function OnReTextBlur(obj){
if(obj.value=="")
{
obj.value="请输入";
obj.style.color="gray";
}
}
</script>
实现效果如下
知识点：
1、容器级标签innerHTML、innerText属性
2、一行代码获取不同的容器对象，那么要求容器对象统一命名”s”+文本框对象的name，获取document.getElementById(“s”+loginid);
示例源码：
请输入：<input name="loginid" id="loginid" onblur="OnBlurCheckInputText(this);" /><span id="sloginid"></span><br />
请输入：<input name="pwd" id="pwd" onblur="OnBlurCheckInputText(this);" /><span id="spwd"></span><br />
请输入：<input name="repwd" id="repwd" onblur="OnBlurCheckInputText(this);" /><span id="srepwd"></span><br />
</body>
<script language="javascript" type="text/javascript">
//失去焦点验证文本框是否合法
function OnBlurCheckInputText(obj){
var sloginid=document.getElementById("s"+obj.name);
if(obj.value=="")
sloginid.innerHTML="<img src='error.jpg'><font color='red'>不得为空</font>";
else
sloginid.innerHTML="<img src='correct.jpg'>";
}
</script>
作业：改写用户注册验证。
完整源码：
<html>
<head><title>XXX 用户注册</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form action="doregister.php" method="post">
<table>
<caption><h3>用户注册</h3></caption>
<tr><th>用户名：</th><td><input onBlur="CheckInput(this);" name="loginid" id="loginid" /></td>
<td><span id="sloginid"></span></td>
</tr>
<tr><th>密码：</th><td><input onBlur="CheckInput(this);" name="pwd" id="pwd" type="password" /></td>
<td><span id="spwd"></span></td>
</tr>
<tr><th>确认密码：</th><td><input name="repwd" id="repwd" type="password" onBlur="CheckInput(this);" /></td>
<td><span id="srepwd"></span></td>
</tr>
<tr><th>昵称：</th><td><input name="uname" id="uname" type="text" /onBlur="CheckInput(this);"></td><td><span id="suname"></span></td></tr>
<tr><th>性别：</th><td><input checked type="radio" id="sex" name="sex" />男<input name="sex" type="radio" id="sex" />女
</td></tr>
<tr><th>喜欢的颜色：</th><td>
<select name="ucolor" id="ucolor" onBlur="CheckInput(this);">
<option selected value="0">==请选择==</option>
<option value="red">--红色--</option>
<option value="green">--绿色--</option>
<option value="blue">--蓝色--</option>
</select>
</td><td><span id="sucolor"></span></td></tr>
<tr><th>爱好：</th><td><input type="checkbox">玩电脑
<input type="checkbox">看书
<input type="checkbox">做运动
</td></tr>
<tr><th>个人简介：</th><td>
<textarea rows="4" name="describe" id="describe" onBlur="CheckInput(this);"></textarea>
</td><td><span id="sdescribe"></span></td></tr>
<tr><td></td><td>
<input type="submit" value="提交" onClick="return SubmitButtonClick();">
<input type="reset" value="重置">
<input type="button" value="取消">
</td></tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
//每个元素失去焦点验证，通过返回true，不通过返回false
function CheckInput(obj){
var result=false;
var span=document.getElementById("s"+obj.name);
//确认密码
if(obj.name=="repwd"){
var pwd=document.getElementById("pwd");
if(obj.value!=pwd.value){
span.innerHTML="<img src='error.jpg'><font color='red'>密码与确认密码不一致</font>";
return result;
}
}
//下拉框
if(obj.name=="ucolor"){
if(obj.value=="0")
{
span.innerHTML="<img src='error.jpg'><font color='red'>请至少选择一个喜欢的颜色</font>";
return result;
}
else{
span.innerHTML="<img src='correct.jpg'>";
return true;
}
}
//个人简介
if(obj.name=="describe"){
if(obj.value.length>256){
span.innerHTML="<img src='error.jpg'><font color='red'>输入的内容不得超出256个字符</font>";
return result;
}
else
{
span.innerHTML="<img src='correct.jpg'>";
return true;
}
}
if(obj.value=="")
span.innerHTML="<img src='error.jpg'><font color='red'>不得为空</font>";
else if(obj.value.length<4 || obj.value.length>16)
span.innerHTML="<img src='error.jpg'><font color='red'>长度在4~16个字符以内</font>";
else{
result=true;
span.innerHTML="<img src='correct.jpg'>";
}
return result;
}
//提交按钮单击事件
function SubmitButtonClick(){
var loginid=document.getElementById("loginid");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var uname=document.getElementById("uname");
var ucolor=document.getElementById("ucolor");
var describe=document.getElementById("describe");
return CheckInput(loginid) && CheckInput(pwd) && CheckInput(repwd) && CheckInput(uname) && CheckInput(ucolor) && CheckInput(describe);
}
</script>
</html>
内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 500+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 CSS 代码片段，实现了超酷的3D立体文字效果。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
div {
color: #ffffff;
font-size: 60px;
font-weight: 700;
text-shadow:
1px 0px #ff5500, 1px 2px #ff5500, 3px 1px #ffaa00,
2px 3px #ff5500, 4px 2px #ffaa00, 4px 4px #ff5500,
5px 3px #ffaa00, 5px 5px #ff5500, 7px 4px #ffaa00,
6px 6px #ff5500, 8px 5px #ffaa00, 7px 7px #ff5500,
9px 6px #ffaa00, 9px 8px #ff5500, 11px 7px #ffaa00
}分享原因
这段代码展示了如何使用CSS的text-shadow属性创建复杂的多层次阴影效果，为文本添加立体感和视觉深度。
通过设置多个阴影值，可以实现炫酷的文字效果，非常适合用于标题、横幅或其他需要吸引注意力的文本元素。
项目中用到时，可直接CV！
代码解析
1. 基础文字样式
color: #ffffff;: 设置文本颜色为白色。
font-size: 60px;: 设置文本字体大小为60像素。
font-weight: 700;: 设置文本粗细为700，即加粗。
2. text-shadow: ...
设置多个文本阴影。
阴影值的格式是：x方向偏移量 y方向偏移量 阴影颜色。
每个阴影值定义一个特定位置和颜色的阴影，多个阴影值组合在一起，创造出复杂的、多层次的3D阴影效果
- end -
起程序员，外行的人对程序员古板的印象是格子衫、双肩包、黑眼睛框、不懂浪漫的指南。但实际上，程序员也是很浪费的！
七夕马上到了，我整理了一些程序员七夕表白代码，总共有40款。计划告别的同学收藏起来了（文末下载）。
我们一起看下其中几个，更多请下载查看。
01 满满爱心
02 相册动画
03 恋爱日志
04 恋爱PPT
05 表白书信
05 烟花特效
表白的套路很多，但都少不了送花送礼物，作为一个程序员，搞不懂现在流行的泡泡机、小猪、重力感应车等玩具，也不想去让朋友们去送钱炫耀，毕竟真情才重要，钱就物质了。我能给各位单身粉丝们做的可能就只有分享几个表白代码了，在电脑上敲上几行代码，让她在郁闷的周一得到一个大大的惊喜，很简单，一看就会，如果现在用不到也不要紧，先收藏起来，反正这样的节日很多，以后用的时候能找到。
私信回复：1022
*请认真填写需求信息，我们会在24小时内与您取得联系。
