新手學(xué)習(xí)javascript部分：驗(yàn)證特效案例，附代

新手學(xué)習(xí)javascript部分：驗(yàn)證特效案例，附代碼

證特效一：

知識(shí)點(diǎn)：

1、事件選擇為Onfocus、Onblur

2、獲取屬性值標(biāo)簽.屬性; 獲取樣式值標(biāo)簽.style.樣式；

3、操作屬性標(biāo)簽.屬性=”值”; 操作樣式值標(biāo)簽.style.樣式=”值”;

4、this用在標(biāo)簽的事件中，代表觸發(fā)該事件的標(biāo)簽本身，可以作為參數(shù)傳遞；另外，在函數(shù)中，或者單獨(dú)寫this，代表該網(wǎng)頁本身，比如this.close();

完整源碼：

請(qǐng)輸入：<input name="loginid" id="loginid" value="請(qǐng)輸入" style="color:gray;" onfocus="OnTextFocus()" onblur="OnTextBlur()" /><br />
請(qǐng)輸入：<input value="請(qǐng)輸入" style="color:gray;" onfocus="OnReTextFocus(this);" onblur="OnReTextBlur(this);" />
</body>
<script language="javascript" type="text/javascript">
//獲取焦點(diǎn)事件
function OnTextFocus(){
var loginid=document.getElementById("loginid");
if(loginid.value=="請(qǐng)輸入"){
loginid.value="";
loginid.style.color="black";
}
}
//失去焦點(diǎn)事件
function OnTextBlur(){
var loginid=document.getElementById("loginid");
if(loginid.value=="")
{
loginid.value="請(qǐng)輸入";
loginid.style.color="gray";
}
}
//驗(yàn)證特效改寫
function OnReTextFocus(obj){
if(obj.value=="請(qǐng)輸入"){
obj.value="";
obj.style.color="black";
}
}
function OnReTextBlur(obj){
if(obj.value=="")
{
obj.value="請(qǐng)輸入";
obj.style.color="gray";
}
}
</script>

驗(yàn)證特效二：

實(shí)現(xiàn)效果如下

知識(shí)點(diǎn)：

1、容器級(jí)標(biāo)簽innerHTML、innerText屬性

2、一行代碼獲取不同的容器對(duì)象，那么要求容器對(duì)象統(tǒng)一命名”s”+文本框?qū)ο蟮膎ame，獲取document.getElementById(“s”+loginid);

示例源碼：

請(qǐng)輸入：<input name="loginid" id="loginid" onblur="OnBlurCheckInputText(this);" /><span id="sloginid"></span><br />
請(qǐng)輸入：<input name="pwd" id="pwd" onblur="OnBlurCheckInputText(this);" /><span id="spwd"></span><br />
請(qǐng)輸入：<input name="repwd" id="repwd" onblur="OnBlurCheckInputText(this);" /><span id="srepwd"></span><br />
</body>
<script language="javascript" type="text/javascript">
//失去焦點(diǎn)驗(yàn)證文本框是否合法
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>

作業(yè)：改寫用戶注冊(cè)驗(yàn)證。

完整源碼：

<html>
<head><title>XXX 用戶注冊(cè)</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form action="doregister.php" method="post">
<table>
<caption><h3>用戶注冊(cè)</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>確認(rèn)密碼：</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">==請(qǐng)選擇==</option>
<option value="red">--紅色--</option>
<option value="green">--綠色--</option>
<option value="blue">--藍(lán)色--</option>
</select>
</td><td><span id="sucolor"></span></td></tr>
<tr><th>愛好：</th><td><input type="checkbox">玩電腦
<input type="checkbox">看書
<input type="checkbox">做運(yùn)動(dòng)
</td></tr>
<tr><th>個(gè)人簡介：</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">
//每個(gè)元素失去焦點(diǎn)驗(yàn)證，通過返回true，不通過返回false
function CheckInput(obj){
var result=false;
var span=document.getElementById("s"+obj.name);
//確認(rèn)密碼
if(obj.name=="repwd"){
var pwd=document.getElementById("pwd");
if(obj.value!=pwd.value){
span.innerHTML="<img src='error.jpg'><font color='red'>密碼與確認(rèn)密碼不一致</font>";
return result;
}
}
//下拉框
if(obj.name=="ucolor"){
if(obj.value=="0")
{
span.innerHTML="<img src='error.jpg'><font color='red'>請(qǐng)至少選擇一個(gè)喜歡的顏色</font>";
return result;
}
else{
span.innerHTML="<img src='correct.jpg'>";
return true;
}
}
//個(gè)人簡介
if(obj.name=="describe"){
if(obj.value.length>256){
span.innerHTML="<img src='error.jpg'><font color='red'>輸入的內(nèi)容不得超出256個(gè)字符</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個(gè)字符以內(nèi)</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>

內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！

大家好，我是大澈！

本文約 500+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優(yōu)質(zhì) CSS 代碼片段，實(shí)現(xiàn)了超酷的3D立體文字效果。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！

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屬性創(chuàng)建復(fù)雜的多層次陰影效果，為文本添加立體感和視覺深度。

通過設(shè)置多個(gè)陰影值，可以實(shí)現(xiàn)炫酷的文字效果，非常適合用于標(biāo)題、橫幅或其他需要吸引注意力的文本元素。

項(xiàng)目中用到時(shí)，可直接CV！

代碼解析

1. 基礎(chǔ)文字樣式

color: #ffffff;: 設(shè)置文本顏色為白色。

font-size: 60px;: 設(shè)置文本字體大小為60像素。

font-weight: 700;: 設(shè)置文本粗細(xì)為700，即加粗。

2. text-shadow: ...

設(shè)置多個(gè)文本陰影。

陰影值的格式是：x方向偏移量 y方向偏移量陰影顏色。

每個(gè)陰影值定義一個(gè)特定位置和顏色的陰影，多個(gè)陰影值組合在一起，創(chuàng)造出復(fù)雜的、多層次的3D陰影效果

- end -

起程序員，外行的人對(duì)程序員古板的印象是格子衫、雙肩包、黑眼睛框、不懂浪漫的指南。但實(shí)際上，程序員也是很浪費(fèi)的！

七夕馬上到了，我整理了一些程序員七夕表白代碼，總共有40款。計(jì)劃告別的同學(xué)收藏起來了（文末下載）。

我們一起看下其中幾個(gè)，更多請(qǐng)下載查看。

01 滿滿愛心

02 相冊(cè)動(dòng)畫

03 戀愛日志

04 戀愛PPT

05 表白書信

05 煙花特效

表白的套路很多，但都少不了送花送禮物，作為一個(gè)程序員，搞不懂現(xiàn)在流行的泡泡機(jī)、小豬、重力感應(yīng)車等玩具，也不想去讓朋友們?nèi)ニ湾X炫耀，畢竟真情才重要，錢就物質(zhì)了。我能給各位單身粉絲們做的可能就只有分享幾個(gè)表白代碼了，在電腦上敲上幾行代碼，讓她在郁悶的周一得到一個(gè)大大的驚喜，很簡單，一看就會(huì)，如果現(xiàn)在用不到也不要緊，先收藏起來，反正這樣的節(jié)日很多，以后用的時(shí)候能找到。

源碼地址

私信回復(fù)：1022

在線咨詢

上一篇：青春美少女人像
下一篇：「就業(yè)服務(wù)」招聘信息

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

新手學(xué)習(xí)javascript部分：驗(yàn)證特效案例，附代

證特效一：

驗(yàn)證特效二：

源碼地址

您的項(xiàng)目需求