新手學習javascript部分：驗證特效案例，附代

新手學習javascript部分：驗證特效案例，附代碼

證特效一：

知識點：

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小時內與您取得聯系。

整合營銷服務商

新手學習javascript部分：驗證特效案例，附代

證特效一：

驗證特效二：

源碼地址

您的項目需求