導航:首頁 > 編程語言 > 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實現左右框相關的資料

熱點內容
人們花錢為什麼逐漸網路化 瀏覽：272
如何用編程辦理電信業務 瀏覽：189
數控磨床小圓弧怎麼編程 瀏覽：390
桐鄉編程貓在哪裡 瀏覽：69
同一文件夾存儲大量文件 瀏覽：126
chrome修改js 瀏覽：842
用pad怎麼發word文件怎麼打開 瀏覽：465
哪個網站有幼 瀏覽：299
航班APP哪個最好 瀏覽：590
網路原創如何增強教育活力 瀏覽：527
蘋果第三方打開文件 瀏覽：310
蘋果電腦桌面移除的文件夾怎麼恢復 瀏覽：292
在文件名前添加字元 瀏覽：424
javaexcel導出控制項 瀏覽：484
怎麼樣粉碎文件 瀏覽：798
谷歌網站怎麼更新 瀏覽：934
svn命令行刪除文件夾 瀏覽：277
如何建立共享數據表 瀏覽：247
ps存儲覆蓋了源文件 瀏覽：668
如何找出合計數的數據 瀏覽：475

友情鏈接