单击按钮发送验证码,出现倒计时的简单实例
代码如下 | 复制代码 |
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery.min.js"type="text/javascript"></script> <script type="text/javascript">
varInterValObj;//timer变量,控制时间 varcount = 30;//间隔函数,1秒执行 varcurCount;//当前剩余秒数
functionsendMessage() { curCount = count; //设置button效果,开始计时 $("#btnSendCode").attr("disabled","true"); $("#btnSendCode").val(curCount +"秒后可重新发送"); InterValObj = window.setInterval(SetRemainTime, 1000);//启动计时器,1秒执行一次
//请求后台发送验证码 TODO
}
//timer处理函数 functionSetRemainTime() { if(curCount == 0) { window.clearInterval(InterValObj);//停止计时器 $("#btnSendCode").removeAttr("disabled");//启用按钮 $("#btnSendCode").val("重新发送验证码"); } else{ curCount--; $("#btnSendCode").val(curCount +"秒后可重新发送"); } } </script> </head> <body> <input id="btnSendCode"type="button"value="发送验证码"onclick="sendMessage()"/></p> </body> </html> |
1. html
代码如下 | 复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=UTF-8"/> <title>Animated Menu Hover 1</title>
<scripttype="text/javascript"src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>
<scripttype="text/javascript"> $(document).ready(function(){ $(".menu li").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); </script>
<styletype="text/css"> body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } .menu { margin: 100px 0 0; padding: 0; list-style: none; } .menu li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; } .menu a { padding: 14px 10px; display: block; color: #000000; width: 144px; text-decoration: none; font-weight: bold; background: url('http://files.jb51.net/file_images/article/201703/button.gif') no-repeat center center; } .menu li em { background: url('http://files.jb51.net/file_images/article/201703/hover.jpg') no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2; display: none; } </style> </head>
<body>
<ulclass="menu"> <li> <ahref=http://www.jb51.netrel="external nofollow">Web Designer Wall</a> <em>A wall of design ideas, web trends, and tutorials</em> </li> <li> <ahref="http://<u><fontcolor="#0066cc">www.jb51.net</font></u>" rel="external nofollow" >Best Web Gallery</a>
<em>Featuring the best CSS and Flash web sites</em> </li> <li> <ahref="http://<u><fontcolor="#0066cc">www.jb51.net</font></u>" rel="external nofollow" >N.Design Studio</a> <em>Blog and design portfolio of WDW designer, Nick La</em> </li> </ul>
</body> </html> |
2. js
代码如下 | 复制代码 |
<script type="text/javascript"> $(document).ready(function(){ $(".menu li").hover(function() { $(this).find("em").animate({opacity:"show", top:"-75"},"slow"); },function() { $(this).find("em").animate({opacity:"hide", top:"-85"},"fast"); }); }); </script> |
3. 效果图
本文介绍了Bootstrap模态框(Modal)实现过渡效果的教程,非常实用,有兴趣的同学快来看看吧可以切换模态框(Modal)插件的隐藏内容:
1、通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框(带有 id="identifier")
2、通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)
代码:
代码如下 | 复制代码 |
<!DOCTYPE html> <html> <head> <title>Bootstrap-模态框Modal</title> <metacharset="utf-8"> <linkrel="stylesheet"href="css/bootstrap.min.css"rel="external nofollow"> </head> <body> <divclass="container"> <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <buttonclass="btn btn-primary btn-lg"data-toggle="modal"data-target="#myModal">开始演示模态框</button> <!-- 模态框(Modal) --> <divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button> <h4class="modal-title"id="myModalLabel"> 模态框(Modal)标题 </h4> </div> <divclass="modal-body"> 在这里添加一些文本 </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-default"data-dismiss="modal">关闭</button> <buttontype="button"class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/bootstrap.min.js"></script> </body> </html> |
注:
aria-labelledby="myModalLabel" aria-hidden="true"
官方API 意思是为盲人或者一些可读设备设置的 role的设置告诉设备这是弹出框 aria-labelledby=".."里面是描述信息,然后aria-hidden="true"再把它隐藏掉,一般人用不到,这样写比较规范
增强模态框的可访问性
务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性,用于指向模态框的标题栏;为 .modal-dialog 添加 aria-hidden="true" 属性。
另外,你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
效果图
最近项目需要,需要对客户传过来的文件进行MD5校验,在实现的过程中前前后后遇到了若干问题,在这里总结一下。
md5的计算采用openssl实现,具体代码网上很多,这里不再赘述。需要注意的问题
1 读取文件内容时,文件打开方式要用二进制方式(rb),因为用户文件有可能是linux格式,如果用文本方式打开,可能会改变原始的内容,造成计算不准。
2 结果检验。windows可以随便下载一个md5计算工具,网上很多,我用的是HashMyFiles。linux下面,md5sum 文件名 即可。
还有一个隐藏得问题需要注意,我们在这里好一阵郁闷。
程序编写完毕,再windows测试都通过了,把文件上传到linux,再运行程序,居然算出来的md5哈希和windows不一样。
经过一阵跟踪、断点、打印发现,文件上传到linux后,大小居然发生了变化,原来问题出在ftp,ftp上传得过程中采用了文本模式,会把文件中换行回车替换为换行。于是重新用二进制模式上传,计算结果一致,问题解决。
总结一下:文件打开读取要用二进制方式,文件传输也要用二进制方式。
相关文章
- 最近想自学PHP ,做了个验证码,但不知道怎么搞的,总出现一个如下图的小红叉,但验证码就是显示不出来,原因如下 未修改之前,出现如下错误; (1)修改步骤如下,原因如下,原因是apache权限没开, (2)点击打开php.int., 搜索extension=ph...2013-10-04
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
jQuery Real Person验证码插件防止表单自动提交
本文介绍的jQuery插件有点特殊,防自动提交表单的验证工具,就是我们经常用到的验证码工具,先给大家看看效果。效果图如下: 使用说明 需要使用jQuery库文件和Real Person库文件 同时需要自定义验证码显示的CSS样式 使用实例...2015-11-08- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- mail()函数的作用:连接到邮件服务器,利用smtp协议,与该服务器交互并投邮件。注意:1、mail函数不支持esmtp协议,---即,只能直投,不能登陆2、由上条,我们只能直投至最终的收件服务器地址.而该地址,又是在PHP.ini中指定的,所...2015-10-30
- 这篇文章研究的主要内容就是使用PHP来发送电子邮件,总结为以下两种方法:一、使用PHP内置的mail()函数<?php $to = "test@163.com"; //收件人 $subject = "Test"; //主题 $message = "This is a test mail!"; //正文...2015-10-30
- 通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能效果图:先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下:复制代码 代码如下: <!DOCTYPE ht...2015-03-15
- 这篇文章主要介绍了c# 如何实现发送邮件的功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-07
- 验证码类文件 CreateImg.class.php <?php class ValidationCode { private $width,$height,$codenum; public $checkcode; //产生的验证码 private $checkimage; //验证码图片 private $disturbColor = ''; /...2015-11-08
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 这篇文章研究的主要内容就是使用PHP来发送电子邮件,总结为以下两种方法:一、使用PHP内置的mail()函数<?php $to = "test@163.com"; //收件人 $subject = "Test"; //主题 $message = "This is a test mail!"; //正文...2015-10-30
- 这篇文章主要介绍了基于JavaScript实现验证码功能的相关资料...2017-04-03
- 这篇文章主要为大家详细介绍了用javascript实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-09
- 倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。本文以团购网站的倒计时为...2015-10-21
- 在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下...2016-01-02
- 下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 代码...2017-07-06
- 验证码是一个现在WEB2.0中常见的一个功能了,像注册、登录又或者是留言页面,都需要注册码来验证当前操作者的合法性,我们会看到有些网站没有验证码,但那是更高级的验证了,...2016-11-25
- 这篇文章主要介绍了基于Pytorch版yolov5的滑块验证码破解思路详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-25
- 这篇文章主要介绍了JS实现倒计时,精确到天数、时、分、秒,还为大家分享了parseInt() 函数的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22