一个有点好看的渐变验证提示框

最新推荐文章于 2024-06-21 12:32:31 发布
最新推荐文章于 2024-06-21 12:32:31 发布
阅读量1.5k 收藏
点赞数
文章标签： div function microsoft input bt button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/evila_love/article/details/1463187
版权

<html>
<head>
<style type="text/css">
input{border:1px solid gray; }
</style>
</head>
<body>
<div style="background-color:Green; width:200px; height:200px;"></div>
<input id="t1"/>
<input id="t2" />
<input type="button" id="bt" value="Submit" οnclick="checkErr()" />
<script>
function checkErr()
{
    if(div1)
    {
  div1.parentNode.removeChild(div1);
  div1="";
 }
    document.getElementById('bt').disabled=true;
    var t1=document.getElementById('t1');
    var t2=document.getElementById('t2');
    if(!/^/w{1,5}$/.test(t1.value)){
    errorMsg="必填项;<br//>长度不大于５个字符";
    setTimeout("tixing1('"+t1.id+"',0);",300);
    return false;
    }
    if(!/^1[5|3]{1}/d{9}$/.test(t2.value))
    {
        errorMsg="必填项;<br//>请填写正确的手机号码";
        setTimeout("tixing1('"+t2.id+"',0);",300);
        return false;
    }
    return true;
}
//function   getXY(obj){  
//  for   (var   lx=0,ly=0;obj!=null;  
//  lx+=obj.offsetLeft,ly+=obj.offsetTop,obj=obj.offsetParent);  
//  return   {x:lx,y:ly}  
//  }
function getXY(obj)
{
    var x=0,y=0;
    while(obj)
    {
        x+=obj.offsetLeft;
        y+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return {x:x,y:y};
}
 
function alertErrMsg(id)
{
    var x,y,w,h;
    var o=document.getElementById(id);
    var oXY=getXY(o);
    div1=document.createElement('div');
    div1.id="div1";
    div1.style.position="absolute";
    if(isIe){
        div1.style.left=oXY.x+120;
        div1.style.top=oXY.y-50;
    }else{
        div1.style.left="150px";
        div1.style.top="150px";
        }  
    div1.style.width="140px";
    div1.style.height="42px";
    div1.style.fontSize="12px";
    //div1.style.backgroundImage="url(img/duihuakuang.gif)";
    div1.style.backgroundColor="#FCD9C4";
    div1.style.boder="1px solid red";
    div1.style.color="red";
    div1.style.zIndex="11";
    div1.style.filter ="alpha(opacity=50)";
    div1.style.MozOpacity=0.50;
    div1.innerHTML="<div style='width:100%;height:100%;margin:5px;'>"+errorMsg+"</div>";
    document.body.appendChild(div1);
  if(isIe)
      swapShadow(80,10,5);
  else
      swapShadow(0.8,0.1,0.05);
}

function swapShadow(m,n,l){//m渐变最大值，n渐变初始值，l渐变时每次递增值。
 if(isIe)
 div1.filters.alpha.opacity=n;
 else
 div1.style.MozOpacity=n;
 n+=l;
 if(n<m){
     window.setTimeout("swapShadow("+m+","+n+","+l+")",20);
 }else{
     window.setTimeout("swapShadow1("+m+","+n+","+l+")",2000);
 }
}
function swapShadow1(m,n,l){//渐变消退
    if(isIe)
 div1.filters.alpha.opacity=n;
 else
 div1.style.MozOpacity=n;
 n+=(-l);
 if(-n<0){
     window.setTimeout("swapShadow1("+m+","+n+","+l+")",20);
     //alert(m+','+n+','+l);
 }else{
     if(div1){//alert(m+','+n+','+l);
      div1.parentNode.removeChild(div1);
      div1="";
      document.getElementById('bt').disabled=false;
  }
 }
}

function tixing1(id,n)
{
n+=1;
if(n<=6)
{
    if(document.getElementById(id).style.borderColor=='')
    document.getElementById(id).style.borderColor='red';
    else
    document.getElementById(id).style.borderColor='';
    window.setTimeout("tixing1('"+id+"',"+n+");",200);
    if(n==6)
    {
        alertErrMsg(id);
    }
}
else
{
    document.getElementById(id).style.borderColor='';
    return;
}
}

var div1;
var isIe=window.navigator.appName.indexOf("Microsoft")!=-1?true:false;//IE浏览器
</script>
</body></html> 

evila_love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮的消息提示框 消息提示组件 Javascript写的
05-28
组件名称：ymPrompt消息提示组件 2.0 演示地址：http://bbs.okajax.com/demo/31/ =============================================================================== 组件说明：在web开发中，对于浏览器默认的消息提示框（如alert,confirm等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 =============================================================================== 组件功能介绍： 1、调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。 2、兼容IE6.0+、FF1.5+、Opear9+（在Opear下显示有一个小缺陷），兼容HTML4/XHTML1.0页面渲染模式。 3、完全的CSS皮肤定制功能，所有外观包括显示图标/关闭按钮等都可以通过css设置。目前提供了五种皮肤，Vista、QQ、dmm-green、ExtBlue和BlackColl。有兴趣可以修改样式表文件定义新的皮肤。 4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态，即如果原来select就是隐藏的，则消息框弹出并关闭后该select仍保持隐藏状态，而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作（包括F5），“消息确认框”支持“tab键/左右方向键”切换确定/取消焦点。 8、可以页面加载的任意时间调用，如页面初始化时调用，页面加载完成后调用。 9、支持通过JSON和传统的参数传入方式。如ymprompt.alert('消息内容',300,200,'消息标题',handler)和ymprompt.alert({message:'消息内容',width:300,height:200,title:'消息标题',handler:handler})，这两种写法是等价的。 10、只需要一个回调函数，可捕获确定、取消及关键按钮的点击事件。函数改变了1.0版需要对确定和取消按钮分别写回调函数及不支持关闭事件的缺陷， 11、完全的封装，对外只暴露一个ymPrompt变量，有效防止与使用者程序变量的冲突。 12、程序(js)与样式(css)的完全分离，取消了1.0中自动加载css的功能，用户可根据需要加载对应css样式表单，降低了对样式配置的复杂度。
提示框渐变效果
weixin_30332705的博客
06-19 80
.tooltip .tooltiptext { visibility: hidden; /* 淡入 - 1秒内从 0% 到 100% 显示: */ opacity: 0; transition: opacity 1s;} .tooltip:hover .tooltiptext { visibility: visible; opacity: 1;} 转载于:ht...
自定义Lable提示框（渐变动画）
weixin_30258027的博客
07-14 51
- (void)viewDidLoad { [super viewDidLoad]; // 移除按钮不能使用,开始默认 self.removeBtn.enabled = NO; self.alertView.textAlignment = UITextAlignmentCenter; self.alertView.alpha = 0...
验证提示框封装
weixin_33724570的博客
07-07 78
{{--提示框--}} //css代码 .cyy_prop{ z-index: 55555; display:none; background: rgba(0,0,0,0.8); width:100%; height:100%; position:absolute; top: 0; left: 0; } #cyy_ok{ z-...
验证提示效果
你好牛蛙！
10-03 624
常见的两种验证提示效果 第一种 前面的输入框和校检部分不再赘述想看移动至这里#### 后面显示的数据不合法是一个span标签，这里这个标签我们也需要通过document得到他的对象，然后通过这个对象对他进行修改，这里是通过得到的对象对span中结束与开始标签中的内容进行更改。 <span id="1"></span>span标签设置id var obj1=document.getElementById("1")通过document获取span对象 if (patt.test(a))
asp.net验证控件气泡提示控件及Demo源码
12-12
本程序能改善asp.net的验证控件的显示效果，用比较人性化的气泡提示来替换掉原来枯燥的界面提示,并带有"关闭提示"的功能，有效的解决了一个输入框带多个验证控件时,显示错误提示信息不在同一个地方的缺陷，也有效...
分享纯手写漂亮的表单验证
09-03
这个方法接收一个设置对象作为参数，包含`flagCss`（提示标记的CSS类）、`flagWidth`（提示框宽度）、`flagInfo`（提示信息）和`isAnimate`（动画效果）。通过`jQuery.extend`将默认设置与传入的设置合并。 5. **...
易语言EXUI支持库制作红色简约网络验证UI界面的代码
08-26
在本文中，我们将探讨如何利用易语言EXUI支持库创建一个红色简约风格的网络验证界面。 首先，我们需要了解易语言的基本结构。易语言是一种中文编程语言，其语法简洁，易于学习。在描述的代码片段中，我们看到了一些...
Axure教程：制作渐变色用户登录交互.docx
05-30
本文将通过一个Axure教程，教你如何制作带有渐变色效果的用户登录交互界面。首先，我们需要了解Axure中的基本元件和交互机制。 1. **矩形元件**：在教程中，矩形被用来作为登录界面的背景。你可以自定义其尺寸（如...
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
10-29
接下来，`fade`函数使用了一个匿名自执行函数，通过递减或递增`value`来改变元素的透明度，并通过`setTimeout`设置定时器，每隔15毫秒调用自身，从而实现平滑的渐变效果。当`value`达到目标值时，递归调用停止。 这...
漂亮的表单验证样式，纯HTML
03-27
漂亮的表单验证样式 纯HTML 单个文件 实用
Jquery实例：提示信息渐入渐出的窗口
07-25
这个是非常好用的一个提示信息渐入渐出的JS，用了Jquery类，只需要将Jquery导入即可使用。
html好看的表单验证码,一个简洁、漂亮的Ajax表单验证程序 vForm
weixin_28909441的博客
06-19 426
vForm表单验证程序(Ajax)//作者：2006-08-08//网址：http://lxbzj.com//email:lxbzmy@163.com//String.isEmail//String.isUrl//Link:http://www.mb5u.com/jscss//表单元素.required//表单元素.isvalid//表单元素.validate//字符串验证扩展//├电子邮件验证S...
修改Layui表单验证提示框样式
热门推荐
honvin的博客
10-02 1万+
一直以来都认为layui挺好看的，包括它的弹层组件layer，不过今天恰好碰到了layui表单验证弹框的位置和样式不能调整的问题；它的默认样式是这样的： 因为我页面布局的关系，弹框挡住了按钮，所以我决定得修改一下弹框方式，于是我去看了一下文档，发现弹框的类型是可以修改的，就是给input加上lay-verType属性 我用这种方式试了一下，效果如下 可惜这种方法只能改变弹...
7、el-form 自定义校验规则、修改校验提示信息样式
sunnnnh的博客
07-16 3902
1、自定义校验规则 参考：(14条消息) 对element的表单进行验证和限制（自定义验证规则）_阮俊维的博客-CSDN博客 2、修改校验提示信息样式 查看F12后发现是el-form-item__error类选择器控制的，但是在当前页面引用这个类选择器重写样式并不会生效 （1）css中：用 深度作用选择器 >>>（仅作用与css） （2）sass/less：需要用 /deep/ 选择器：/deep/ .el-form-item__error { } ...
Vue表单输入密码实现密码格式和强度验证提示框-demo
JackieDYH的博客
01-18 579
Vue表单输入密码实现密码格式和强度验证提示框-demo。
js简单表单验证（弹出框）
飞鸿的博客
05-07 1万+
登录和注册的弹出框的js验证有些字段是不能为空的，那么我们就要通过验证判断：用户是否填写。此时就要用到js验证。登录html&lt;form action="" method="post" name="form1" target="_blank" id="form1" onSubmit="return check_login()"&gt; &lt;h1&amp
javaScript实现表单验证（弹出对话框）
ytm1996的博客
04-23 4968
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script type="text/javascript"&gt;            fun
微软Edge浏览器的安全防护：抵御恶意软件的策略与功能
最新发布
2401_85763639的博客
06-21 618
在数字时代，网络安全已成为用户和企业关注的焦点。恶意软件，包括病毒、蠕虫、特洛伊木马、勒索软件等，对个人隐私和数据安全构成了严重威胁。微软Edge浏览器作为微软推出的新一代网页浏览器，集成了多种安全特性，以保护用户免受恶意软件的侵害。本文将详细介绍Edge浏览器的安全防护措施，以及用户如何利用这些功能提高在线安全性。
用uniapp，配合uview2 的ui框架，写一个登录页，需要验证账号密码，验证规则是必填。背景图放一个美景图。需要看到一个圆形的头像，头像上面写了宜春环保局。按钮是蓝绿的渐变色，输入框也要做的大气一点，边框有阴影。
05-26
好的，以下是一个简单的登录页示例，使用uview2的UI框架： ```html <image class="bg-image" src="../static/bg-image.jpg"></image> 宜春环保局 请输入账号" clearable> 请输入密码" clearable...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值