搜索到
3
篇与
jquery
的结果
-
jquery 计算人生剩余时间进度条 今天在上课的时候，说到人生剩余的时间。记得当时ppt上面的图是一个长条，里面分成了好多格。类似于下图。当然实际上的图肯定比这个要精确一些。什么吃喝玩乐工作睡觉花费的时间都有个大概的计算。然后呢我就想写一个人生进度条，记录自己已经过了多少，还剩多少。能活多久我是算得平均年龄72岁。简单看下代码<body> <div> <progress value= "10" max= "26300" class= "dayjdt" ></progress> </div> <script> function runday (){ var ontime = new Date ( "2000-12-10 15:30:00" ); var nowtime = new Date (); var timeDifference = ( nowtime . getTime () - ontime . getTime ()); var ms = 86400000 ; var day = Math . floor ( timeDifference / ms ); //var averageLife = 26300; $ ( ".dayjdt" ) . val ( day ); $ ( ".dayjdt" ) . attr ( "title" , day ); } setInterval ( runday , 86400000 ); </script> </body>其实是很简单的，跟我主页上面的那个计算网站运行多久类似的代码，只不过我这个最后面使用的jquery写的，前面的数据获取还是用的var。当然如果想看效果的话可以把最后的setinterval的间隔时间改为1000，不过其实毕竟是计算天的，所以并没有明显的效果，可以改变电脑时间来看具体的效果，我这里就不演示啦。代码逻辑我觉得还是非常清晰的，所以就不多做概述了。一看就懂。 -
jQuery全版本下载 通过jQuery官网下载地址为https://code.jquery.com/然后点击想要下载的版本，我简单举个例子，我下载1.x的uncompressed版本，单机这个版本然后会有如下的弹窗然后复制这个网址，去浏览器打开然后我们ctrl+s进行储存即可使用。除了这种利用官网下载的方法，我们还可以利用百度，字节跳动之类的国内企业提供的网址下载。" https://libs.baidu.com/jquery/1.11.1/jquery.min.js "" https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js "当然具体的版本还是要自己查找的，一个非常简单的方法就是修改版本号来进行尝试，不过大多数还是不可以的。推荐还是使用jQuery官网来进行下载！如果说想要下载什么版本不行的话，可以在评论区留言！
-
通过jquery实现用户注册验证 最近在准备考证，再加上要改版一下网站，加一些用户交互功能之类的，并且其实毕竟做东西就是要做好嘛。所以就在尝试用户注册功能，其实主要还是学习的案例里面有这个通过jQuery来实现简单的用户注册功能，然后虽然没怎么仔细听，但是还是会个大概，再加上学了一上午有点小困，所以敲个代码来刺激一下自己。其实JavaScript也可以实现这个效果的，只不过相对要麻烦一些，如果有需要的话，我可能会写一个通过JavaScript来实现用户注册的文章，还是看需求，哈哈。其实这个用户注册还是要通过后台进行数据验证的，但是php学的不是很精，所以只是简单的验证了一下用户注册和密码过于简单。苦命，写文章写到一半，然后感觉会有一个小问题出现，然后去测试了一下，发现确实有，之后修改了半天！！！不过目前没找到啥方法解决！好悲惨！---->目前在问老师了，就是想要实现一个判断，之后会输出相应的提示框。上下效果图：就是判断你的用户名是否符合格式，密码是否符合规则，有没有重命名，密码是不是太简单了，很简单的一个小例子，不过很综合，哈哈。上下代码：<div> <input type="text" name="username"><span></span> <input type="password" name="password"><span></span> <button>注册 </button> </div> <script src="../dmo/jquery.min.js"></script> <script> registerrule = /^[a-zA-z0-9_-]{4,16}$/; //检测用户名格式的正则 $表示不能包含其他字符 passwordrule = /^[a-zA-z0-9_-]{6,16}$/; //检测用户密码 $(function(){ function checkname(){ valname = $("input[name=username]").val(); if(valname == ""){ $("span").eq('0').html("用户名未填写").css("color", "red"); return false; } else if (registerrule.test(valname)){ $("span").eq('0').html("用户名格式正确").css("color", "green"); return true; } else { $("span").eq('0').html("用户名格式不正确").css("color", "red"); return false; } } function checkpassword(){ valpw = $("input[name=password]").val(); if(valpw == ""){ $("span").eq('1').html("密码未填写").css("color", "red"); return false; } else{ $("span").eq('1').html("密码格式正确").css("color", "green"); return true; } } $("input[name=username]").blur(function(){ checkname() }).focus(function(){ $("span").eq('0').html(""); }) $("input[name=password]").blur(function(){ checkpassword(); }).focus(function(){ $("span").eq('1').html(""); }) $("button").click(function(){ if(checkname()){ $.post("./jiancename.php",{name:valname},function(data){ if(data == "yes"){ $("span").eq('0').html("用户名已存在").css("color", "red"); } }) } if(checkpassword()){ $.post("./jiancepsw.php",{psw:valpw},function(data){ if(data == "yes"){ $("span").eq('1').html("密码太简单了，请换一种密码").css("color", "red"); } }) } }) }) </script>差不多就是这些，因为注释有点多，就自己剪了一下，如果报错记得告诉我。思路很简单，就是通过input来输入数据，之后通过jquery来进行判断，当然这里的判断是一些比较简单的判断，比如果命名是否符合规则，密码是否符合规则等等，不过其实密码应该不需要的，不过当时还是加上了。然后再通过php后台来进行数据的判断，是否重命名，是否符合简单密码等等吧，不过其实这个简单密码没必要加在这里，可以之前在前面加上判断就好了，可以直接删除掉这段。然后php文件就是<?php if($_POST["name"] == "aaaaa"){ echo "yes"; } else { echo "no"; }这个，之所以没有?>结束符号，是因为上课的老师讲如果是一个单独的php文件，里面全是php代码的话，不需要结束符号，我觉得应该是如果你只是一个单独的php文件的话，那么你后期再加代码直接往上加就行了，而不需要先把结束符号往后回车几下。说一下这个$("span").eq('1').html("密码太简单了，请换一种密码").css("color", "red");这个就是获取子类的方法，通过$("span")选中span标签，然后通过eq来遍历一下这个标签，因为一共就两个，所以选择第二个的话就是1了，之后再用html方法来修改显示的文字，css方法来修改样式。前面的代码没什么难度，也就是这个获取第二个字类稍微有点难度。再说下我想加的效果，就是通过判断，是否名字和密码都符合规则，如果符合的话就出现一个弹窗，本来后面是加的一个if判断，前面命名一个变量即可，但是后来发现你在jquery里修改值没有效果，所以就暂时先放一下，问问老师，嘿嘿。如果有什么问题可以在评论区留言询问，我会在看到的第一时间进行回答的。
