2021-05-28发表2023-10-19更新技术分享4 分钟读完 (大约581个字)

用php和jquery分别实现验证码功能

一开始是想通过 jQuery 来实现验证码功能的。也实现了。

验证码效果

但是发现不能很好的和 PHP 联动，我是想直接用 JavaScript 来判断是否正确而非进行提交，不能很好的达到我想要的效果，当然也可能是我没想到。

<script>
    var num_list=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    var num='';
    var num_len=5;
    function createnum(){
        for(let i =0;i<num_len;i++){
            let num_random = Math.floor(Math.random()*num_list.length)
            num = num+num_list[num_random];
        }
    }
    createnum();
    $('.right-num').val(num);
</script>

简单上一下 jQuery 的代码，很简单，但是没有实现我想要的效果，所以放弃来使用 PHP 写。

其实 PHP 的思路和 JavaScript 是一样的，我们通过数组来创建包含数据的数组，然后设置随机数来随机选择数据。

<?php
    $numlist = array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
    $num ='';
    $numlen=5;
    function createnum($numlist,$num,$numlen){
        for($i=0;$i<$numlen;$i++){
            $numrandom = rand(0,count($numlist)-1);
            $num=$num.$numlist[$numrandom];
        }
        return $num;
    }
    $num =createnum($numlist,$num,$numlen);
?>

我是直接将我的代码复制上来了，其实也就是前面创建出来这个验证码，然后在验证码的地方输出，之后通过 form 表单提交数据，这里面有个很关键的地方就是传 right-num 数据。如果我们不传这个数据而是使用前面的 $num 的话，那么会造成 $num 为当前页面的验证码，而我们提交的则是上一个页面的验证码，也就是说我们点击提交按钮后，数据发生了变化，我们提交的是之前的验证码，而 $num 是提交后新生成的。所以我们就需要将之前生成的验证码也传入 PHP 中来进行判断。

然后就实现了验证码的功能，虽然比较简陋，但是验证码通常用来防止自动提交等，防君子不防小人。

2021-03-16发表2023-10-19更新技术分享2 分钟读完 (大约338个字)

jquery 计算人生剩余时间进度条

今天在上课的时候，说到人生剩余的时间。

记得当时ppt上面的图是一个长条，里面分成了好多格，类似于下图。

jquery 计算人生剩余时间进度条

当然实际上的图肯定比这个要精确一些。包括吃喝玩乐工作睡觉等方面的时间都有一个大概的计算。

然后呢，我就想写一个人生进度条，记录自己已经过了多少，还剩多少。我假设平均年龄是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);
            $(".dayjdt").val(day);
            $(".dayjdt").attr("title", day);
        }
        setInterval(runday, 86400000);
    </script>
</body>

这实际上很简单，类似于我主页上面的计算网站运行时间的代码，只不过这里使用了 jQuery 来写，前面的数据获取仍然使用了 var。

jquery 计算人生剩余时间进度条

如果想看效果，可以将 setInterval 的间隔时间改为 1000（1秒），尽管由于是计算天数，效果可能不会明显。如果要查看具体效果，可以更改计算机的时间来观察。

2020-11-22发表2023-10-19更新技术分享8 分钟读完 (大约1208个字)

通过jquery实现用户注册验证

最近在准备考证，再加上要改版一下网站，加一些用户交互功能之类的，并且其实毕竟做东西就是要做好嘛。所以就在尝试用户注册功能，其实主要还是学习的案例里面有这个通过 jQuery 来实现简单的用户注册功能，然后虽然没怎么仔细听，但是还是会个大概，再加上学了一上午有点小困，所以敲个代码来刺激一下自己。其实 JavaScript 也可以实现这个效果的，只不过相对要麻烦一些，如果有需要的话，我可能会写一个通过 JavaScript 来实现用户注册的文章，还是看需求，哈哈。其实这个用户注册还是要通过后台进行数据验证的，但是 PHP 学的不是很精，所以只是简单的验证了一下用户注册和密码过于简单。苦命，写文章写到一半，然后感觉会有一个小问题出现，然后去测试了一下，发现确实有，之后修改了半天！不过目前没找到啥方法解决！好悲惨！—->目前在问老师了，就是想要实现一个判断，之后会输出相应的提示框。上下效果图：通过 jQuery 实现用户注册验证就是判断你的用户名是否符合格式，密码是否符合规则，有没有重命名，密码是不是太简单了，很简单的一个小例子，不过很综合，哈哈。

// 注册
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()){
      $("span").eq(0).html("用户名已存在").css("color", "red");
    }
    if(checkpassword()){
      $("span").eq(1).html("密码太简单了，请换一种密码").css("color", "red");
    }
  })
})()

差不多就是这些，因为注释有点多，就自己剪了一下，如果报错记得告诉我。思路很简单，就是通过 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 里修改值没有效果，所以就暂时先放一下，问问老师，嘿嘿。

用php和jquery分别实现验证码功能

jquery 计算人生剩余时间进度条

通过jquery实现用户注册验证

链接

分类

最新文章

归档

标签

订阅更新

follow.it