前端学习的第六周

最新推荐文章于 2024-07-24 23:00:08 发布

鲲罹

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量40

点赞数 1

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/2202_75675550/article/details/129902913

版权

这一周的任务是完善增删改查和登陆页面，本来以为会很简单，但没想到原来有这么多需要改（只能怪自己原来写的太差），通过这一周的学习，我了解到一些关于页面制作时需要考虑的新角度——面对未知的用户要尽力将一切可能“扼杀”在摇篮之中，终于理解为什么编译应用为什么存在“傻瓜式”安装了：专门对付英语不好还逞强的“无能”新手（我）。

言归正传，在本周的学习中，我学习到了验证码的获取

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证码的获取</title>
	</head>
<style>
#code{
	outline: none;
	border: 1px gray solid;
	border-radius: 3px;
}
#get{
	border: 1px gray solid;
	border-radius: 3px;
	background-color: aquamarine;
}
</style>
	<body>
    <h2>验证码</h2>
    <input id="code" type="text" placeholder="请输入验证码">
    <button id="get">获取</button>
	</body>
<script>
let time = 25;
//设置获取验证码的时间
let get = document.getElementById("get");
//获取按钮
get.onclick = function(){
let btntime = setInterval(function(){
if(time==0){
clearInterval(btntime);
//取消定时器
get.style.background="aquamarine";
//恢复颜色
get.disabled = false;
//对按钮取消禁用
time =25;
get.innerHTML="获取";
}else{
time--;
get.innerHTML=`获取${time}`
get.disabled = true;
//在倒计时期间不能点击按钮
get.style.background ="gray";
//改变倒计时期间按钮的颜色
}
},1000)
}
</script>
</html>

页面结果

在倒计时结束时页面再次变为前面的图片,在本周的学习中除了验证码的获取，还进一步学习了ajax的用法，以及如何对返回的数据进行处理，并将其渲染到页面上等。

“一万年太久，只争朝夕”，在以后的学习中更要紧紧把握时间，成就不一样的自己。

学习前端的42天

鲲罹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习的第六周

这一周的任务是完善增删改查和登陆页面，本来以为会很简单，但没想到原来有这么多需要改（只能怪自己原来写的太差），通过这一周的学习，我了解到一些关于页面制作时需要考虑的新角度——面对未知的用户要尽力将一切可能“扼杀”在摇篮之中，终于理解为什么编译应用为什么存在“傻瓜式”安装了：专门对付英语不好还逞强的“无能”新手（我）。在倒计时结束时页面再次变为前面的图片,在本周的学习中除了验证码的获取，还进一步学习了ajax的用法，以及如何对返回的数据进行处理，并将其渲染到页面上等。
复制链接

扫一扫