导航:首页 > 编程语言 > 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实现左右框相关的资料

热点内容
网络中常用的传输介质 浏览：518
文件如何使用 浏览：322
同步推密码找回 浏览：865
乐高怎么才能用电脑编程序 浏览：65
本机qq文件为什么找不到 浏览：264
安卓qq空间免升级 浏览：490
linux如何删除模块驱动程序 浏览：193
at89c51c程序 浏览：329
怎么创建word大纲文件 浏览：622
袅袅朗诵文件生成器 浏览：626
1054件文件是多少gb 浏览：371
高州禁养区内能养猪多少头的文件 浏览：927
win8ico文件 浏览：949
仁和数控怎么编程 浏览：381
项目文件夹图片 浏览：87
怎么在东芝电视安装app 浏览：954
plc显示数字怎么编程 浏览：439
如何辨别假网站 浏览：711
宽带用别人的账号密码 浏览：556
新app如何占有市场 浏览：42

友情链接