前端练习：day02

效果图：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /><!-- 页面样式 --><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css"><!-- 页面标题 --><title>js 练习题</title>
</head><body><div class="time-area"><div class="container"><span id="timer">2020/05/24&nbsp;&nbsp; 星期日&nbsp;&nbsp;&nbsp;17:39:44</span></div></div><div class="container"><form id="infoForm"><div class="clearfix form-item"><div class="l form-txt">用户名：</div><input type="text" class="l info-input" id="uname"><div class="l form-tips" id="uname-tips">用户名不能为空!</div></div><div class="clearfix form-item"><div class="l form-txt">密码：</div><input type="password" class=" l info-input" id="upass"><div class="l form-tips" id="upass-tips">密码不能为空!</div></div><div class="clearfix form-item"><div class="l form-txt">确认密码：</div><input type="password" class=" l info-input" id="upassother"><div class="l form-tips" id="upassother-tips">两次密码输入不一致!</div></div><div class="clearfix form-item"><div class="l form-txt">手机号：</div><input type="text" class="l info-input" id="uphone"><div class="l form-tips" id="uphone-tips">手机号不能为空!</div><div class="l form-tips" id="uphone-tips1">手机号格式不正确!</div></div><button type="button" class="form-btn" id="formBtn">提交</button></form></div><!-- 页面js --><script src="js/index.js"></script>
</body></html>

/**!
* [js 练习题]
* date: 2021-04-23
* author: 李毅;
*/
function time() {var week, w_index;week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];var date = new Date();year = date.getFullYear();month = date.getMonth() + 1;if(month<10) month="0"+month;day = date.getDate();if(day<10) day="0"+day;hours = date.getHours();if(hours<10) hours="0"+hours;minutes = date.getMinutes();if(minutes<10) minutes="0"+minutes;seconds = date.getSeconds();if(seconds<10) seconds="0"+seconds;w_index = date.getDay();document.getElementById("timer").innerHTML = year + "/" + month + "/" + day + "/" + "\t" + week[w_index] + "\t" + hours + ":" + minutes + ":" + seconds;
};time();setInterval("time()", 1000);var formBtn = document.getElementById("formBtn");formBtn.onclick = function(){var rturn = 1;//用户名验证：var username = document.getElementById("uname");if(username.value=="" || username.value.trim().length==0){document.getElementById("uname-tips").style.display="block";username.style.border="1px solid red";rturn = 0;}else{document.getElementById("uname-tips").style.display="none";username.style.border="";rturn = 1;}//用户密码验证：var upass= document.getElementById("upass")if(upass.value=="" || upass.value.trim().length==0){document.getElementById("upass-tips").style.display="block";upass.style.border="1px solid red";rturn = 0;}else{document.getElementById("upass-tips").style.display="none";upass.style.border="";rturn = 1;}//用户密码重新输入验证：var upassother = document.getElementById("upassother");if(upassother.value != upass.value){document.getElementById("upassother-tips").style.display="block";upassother.style.border="1px solid red";rturn = 0;}else{document.getElementById("upassother-tips").style.display="none";upassother.style.border="";rturn = 1;}//手机号验证var uphone = document.getElementById("uphone");if(uphone.value=="" || uphone.value.trim().length==0){document.getElementById("uphone-tips").style.display="block";document.getElementById("uphone-tips1").style.display="none";uphone.style.border="1px solid red";rturn = 0;}else if(!/^[1][3,5,8][0-9]{9}$/.test(document.getElementById("uphone").value)){document.getElementById("uphone-tips1").style.display="block";document.getElementById("uphone-tips").style.display="none";uphone.style.border="1px solid red";rturn = 0;}else{document.getElementById("uphone-tips").style.display="none";document.getElementById("uphone-tips1").style.display="none";uphone.style.border="";rturn = 1;}if(rturn == 1){setTimeout(()=>{alert("注册成功");},500);}
};

/**!
* [js 练习题]
* date: 2020-05-24
* author: [wuzhou];
*/.time-area {line-height: 50px;background-color: #eee;
}.form-item {margin-top: 20px;line-height: 42px;
}.form-txt {width: 180px;text-align: right;
}.info-input {height: 40px;line-height: 40px;padding-left: 10px;width: 300px;border: 1px solid #eee;
}.form-tips {margin-left: 20px;color: #f00;display: none;
}.form-btn {width: 180px;height: 50px;border: 0;margin-left: 180px;margin-top: 20px;color: #fff;cursor: pointer;font-size: 18px;background-color: #31316b;border-radius: 10px;transition: all 0.3s;
}.form-btn:hover {background-color: #f60;
}

前端练习：day02相关推荐

前端学习 DAY02
Java web DAY02 HTML表格标签场景: <html> <head><title>表格</title> </head> < ...
HTML day02
前端班day02课堂内容记录主要内容:HTML a标签,表单及css基本内容 ①关于a标签 <a href=" "> </a> href:核心属性 ...
从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录从零开始学前端 ...
前端工作随笔日记 Day02
上午: 凌晨家里那只缺德的猫,估计是发春了,这几天,天天叫个不停,还掉毛.五点多起来抓猫,给它一顿揍,丢阳台去了. 七点起来洗漱,吃了口全麦面包,差点噎死我. 八点到公司,停好车去买了两个包子,两块钱 ...
前端与移动开发乐淘项目-day02
1.实现mui区域滚动: A.编写区域滚动需要的dom结构: <div class="mui-scroll-wrapper"><div class="m ...
前端 day02 CSS
目录 CSS 1.代码的三种引入方式 2.CSS选择器 3.常用样式盒子模型 1.内边距 2.外边距 CSS 1.代码的三种引入方式 (1)内联样式 (2)内部样式 (3)外部样式 /*外部的css ...
与前端新人一起学魔法 Day02 HTML基础（二）
列表标签表单标签用于展示数据英文缩写为: <li> ----List Item <ul>----Unordered List <ol>----Ordered L ...
html中如何实现选择存储路径的功能_HTML是Web前端的基础知识，刚入门的你真的学对了吗？...
HTML 概念前端最核心的技术 HTML + CSS + javascript HTML - 结构 - 骨架 CSS - 样式 - 效果 JAVASCRIPT - (用户)行为 - 做的事情超文本 ...
从零开始学前端：初识JavaScript --- 今天你学习了吗？（JS：Day01）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:jQuery官网 - 今天你学习了吗?(CSS:Day26) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：链接跳转 --- 今天你学习了吗？（CSS：Day03）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:HTML的一些文本格式化标签.快捷键.和特殊符号 - 今天你学习了吗?(CSS:Day02) 文章目录从 ...

前端练习：day02

前端练习：day02相关推荐

最新文章

热门文章