導航:首頁 > 編程語言 > js實現左右框

js實現左右框

 發布時間：2025-03-18 10:32:31

⑴ js實現點擊輸入用戶名或密碼的文本框在旁邊彈出提示語

你可以使用formValidator.js，專門做表單驗證的，效果如下：

用法很簡單，引用formValidator.js的核心類庫，然後初始化$.formValidator.initConfig({formid: "main",debug:false,submitOnce : true});

然後對要做校驗的文本框編寫校驗代碼

$("#employeeNo").formValidator({onshow : "輸入范圍為1到10個字元",
onfocus : "輸入范圍為1到10個字元",oncorrect : " "}).inputValidator({
min: 1, max: 10, empty:{leftempty:false,rightempty:false,emptyerror:"該欄位左右不允許出現空格"}, onerror : "輸入范圍為1到10個字元"});
$("#employeeName").formValidator({onshow : "輸入范圍為1到40個字元",
onfocus : "輸入范圍為1到40個字元",oncorrect : " "}).inputValidator({
min: 1, max: 40, empty:{leftempty:false,rightempty:false,emptyerror:"該欄位左右不允許出現空格"}, onerror : "輸入范圍為1到40個字元"});

在後面對應的<div id="employeeNoTip"></div>顯示提示語

formValidator.js這個網上有很多實例和教程，很簡單的

⑵ js實現桌面右下角彈出框

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=GB2312"/>
<title>右下角彈窗效果練習by阿會楠</title>
<scriptlanguage="javaScript"type="text/javascript">
function$(obj){
returndocument.getElementById(obj);
}
functionpop(obj){
varh=parseInt($("popDiv").currentStyle.height);
$("popDiv").style.height=(h+obj)+"px";
if(parseInt($("popDiv").style.height)<2){
window.clearInterval(timer);
$("popDiv").style.display="none";
}
if(parseInt($("popDiv").style.height)>=200){
window.clearInterval(timer);
}

}

vartimer;
functionruntimer(obj){
timer=window.setInterval(function(){pop(obj)},10);
}
window.onload=function(){
runtimer(2);
}
</script>
</head>
<body>
<divstyle="position:absolute;right:0;bottom:0;height:0px;width:200px;border:1pxsolidred;"id="popDiv">
<ahref="javascript:runtimer(-2);void(0)">×</a>
</div>
</body>
</html>

⑶ js實現點擊一個按鈕就在旁邊出現另一個框

把show()和hidden()里各加一個參數就可以了：

<htmllang="ru">
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
</head>
<body>
<divid="div1"style="display:none"onMouseout="hidden(this);"class="content">aaaaa</div>
<divid="div2"style="display:none"onMouseout="hidden(this);"class="content">bbbbb</div>
<div></div>
<div>
<ulid='tabnav'>
<li><inputname="name"type="button"onClick="show(1);"value="顯示1"></li>
<li><inputname="name"type="button"onClick="show(2);"value="顯示2"></li>
<liclass='active'></li></ul></div></div>
<scripttype="text/javascript">
functionshow(v){
	document.getElementById("div"+v).style.display="";
}
functionhidden(v){
	v.style.display="none";
}
</script>
</body>
</html>

⑷ js中實現點擊一個元素加邊框,點擊另一個元素去掉前一個元素邊框,當前元素加邊框

使用：.addClass('active').siblings().removeClass('active')；即可

解釋：給當前選中的增加邊框.addClass('active')

給原先選中的取消邊框.siblings().removeClass('active')

詳細如下：

<style type="text/css">
.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}
.clr{zoom:1;}
.price{width:100%;}
.price a{width:100px;height:40px;line-height:40px;text-align:center;background:#eee;float:left;margin:0 5px;display:block;cursor:pointer;}
.price a.active{border:1px solid red;}
</style>

<div class="price clr">
<a>5元</a>
<a>10元</a>
<a>100元</a>
<a>200元</a>
</div>

<script type="text/javascript" src="引用jquery.js或zepto.js"></script>
<script type="text/javascript">
$(function(){
$('.price a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>

效果如下：

⑸ html中input默認為無邊框，通過js顯示邊框

html中input默認為無邊框，通過js顯示邊框的方法。

如下參考：

1.首先，根據圖中顯示的代碼創建一個新的HTML文件。

閱讀全文

與js實現左右框相關的資料

熱點內容
微信奢侈品法律風險 瀏覽：982
iejs實現全屏顯示 瀏覽：495
dnf90版本男格鬥武器 瀏覽：743
台灣網路電視台直播 瀏覽：332
文件夾主名 瀏覽：754
如何可以破譯wifi密碼嗎 瀏覽：213
hog特徵提取代碼c 瀏覽：447
網站定製和模板有什麼不同 瀏覽：529
蘋果耳機是幾單元 瀏覽：807
oppo手機藍牙怎麼傳文件 瀏覽：661
iphone同步文件夾 瀏覽：656
u盤存文件慢是什麼原因 瀏覽：608
iphone手機定位軟體破解版 瀏覽：34
win7取消共享文件密碼 瀏覽：519
怎麼練c編程 瀏覽：101
xml文件中的注釋是 瀏覽：353
報考質量內審員在什麼網站 瀏覽：883
服務網路拓撲怎麼變化 瀏覽：871
微信接收文件在電腦哪 瀏覽：232
java定時器定時執行一次 瀏覽：821

友情鏈接