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

热点内容
u盘存文件慢是什么原因 浏览：608
iphone手机定位软件破解版 浏览：34
win7取消共享文件密码 浏览：519
怎么练c编程 浏览：101
xml文件中的注释是 浏览：353
报考质量内审员在什么网站 浏览：883
服务网络拓扑怎么变化 浏览：871
微信接收文件在电脑哪 浏览：232
java定时器定时执行一次 浏览：821
微信公众平台javademo 浏览：83
大学生课件APP怎么弄 浏览：241
js获取到span中的值 浏览：20
手机自动跳出游戏安装程序 浏览：920
iphone4s612固件 浏览：65
奥数编程有哪些用处 浏览：810
win101704游戏闪屏 浏览：461
深孔钻编程软件哪个好 浏览：756
怎么上传百度文件下载 浏览：203
wordpress做的学校网站 浏览：314
xp系统启动之后网络图标 浏览：184

友情链接