做出来的效果是这样的。
当鼠标点击验证码的Input框时。
点击里面的img可以进行刷新
对应的代码如下:
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/cover.css" rel="stylesheet" />
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
关键的js文件为:
popper.min.js和bootstrap.bundle.js和bootStrap.min.js和jquery-3.6.0.min.js
对应的input框为:
<form class="">
<div class="form-floating mb-3">
<input type="text" class="form-control rounded-4 text-white bg-dark" id="userName" placeholder="name@example.com" />
<label name="userName" for="userName">用户名</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control rounded-4 text-white bg-dark" id="password" placeholder="password" />
<label name="password" for="password">密码</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control rounded-4 text-white bg-dark" data-bs-toggle="popover" title="点击刷新" data-html="true" data-bs-content='<img src="" />' id="captcha" placeholder="text" />
<label name="password" for="captcha" >验证码</label>
</div>
<button class="w-100 mb-2 btn btn-lg rounded-4 btn-outline-light" type="submit">登录</button>
</form>
在html结尾后填写js脚本:
<script>
$(function(){
$("[data-bs-toggle='popover']").popover({
html: true,
placement: "left",
content: "<img id='captchaImg' src='index.php?p=user&c=privilege&a=captcha' width='200' height='60px'>"
});
}).click(function (){
$("#captchaImg").click(function (){
$("#captchaImg").attr("src", "index.php?p=user&c=privilege&a=captcha&"+ Math.random());
});
});
</script>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/122804259
内容来源于网络,如有侵权,请联系作者删除!