Java学习总计（二十六）——JavaScript正则表达式，Js表单验证,原生js+css页面时钟
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java学习总计（二十六）——JavaScript正则表达式，Js表单验证,原生js+css页面时钟相关的知识，希望对你有一定的参考价值。
一．javascript正则表达式
1.exec检索字符串中指定的值，返回找到的值，并确定其位置
2.test检索字符串中指定的值，返回true或false
3.正则表达式对象的创建：
（1）方式一：
Var rgex=new RegExp(“[0-9]”,”模式”);
（2）方式二：简便写法，用双斜杠//把正则表达式的内容括起来
例1（正则创建，使用test()方法）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则验证01</title>
<script type="text/javascript">
var str="helloword";
var regx=/^[A-Z0-9]+$/i;//i用于忽略大小写
var falg=regx.test(str);
alert(falg);
</script>
</head>
<body>
</body>
</html>
运行结果：
二．javaScript完成表单验证
1.先来了解几个相关事件：
（1）onsubmit 表单的提交事件 值是return true 表单能提交到后台
（2）onblur 表单失去焦点
2.代码举例说明表单验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
margin-top: 10px;
}
font{
font-size: 11px;
}
</style>
</head>
<body style="text-align: center;">
<div style="width: 300px;height: 400px; border: 1px solid black;margin-left: 500px; background-color: ivory;">
<h3> 注册界面</h3>
<form method="post" action="https://www.2345.com/?38264-0010" onsubmit="return checkAll()">
用户名：<input type="text" id="uname" value="" placeholder="用户名是6-12字母" name="username" onblur="checkUsername()" /><br />
<span id="us"></span><br>
密 码：<input type="password" id="upwd" value="" placeholder="密码是6-12数字" name="pwd" onblur="checkPwd()"/><br />
<span id="up"></span><br>
邮 箱：<input type="text" id="Email" value="" placeholder="邮箱按正确格式填写" name="Email" onblur="checkEmail()"/><br />
<span id="em"></span><br>
<div style="margin-top: 15px;"><a href="regular01.html">注意事项</a></div>
<input id="ra" type="radio" name="xieyi" value="xieyi" onclick="checkRedio()"> 我已阅读并同意网络协议<br />
<input type="submit" value="注册" />
<input style="margin-left: 15px" type="reset" value="重置" onclick="checkClear()"/>
</form>
</div>
<script type="text/javascript">
//验证用户名
function checkUsername(){
var v = document.getElementById("uname").value;
var regx = /^[a-z]{6,12}$/i;
var falg=regx.test(v);
var us=document.getElementById("us");
if(falg){
us.innerHTML="<font color=‘green‘>用户名规则正确..</font>"
}else{
us.innerHTML="<font color=‘red‘>用户名规则错误!!</font>"
}
return falg;
}
//验证密码
function checkPwd(){
var pwd=document.getElementById("upwd").value;
var regx = /^[0-9]{6,12}$/;
var falg1=regx.test(pwd);
var up=document.getElementById("up");
if(falg1){
up.innerHTML="<font color=‘green‘>密码规则正确..</font>"
}else{
up.innerHTML="<font color=‘red‘>密码规则错误！！</font>"
}
return falg1;
}
//验证邮箱
function checkEmail(){
var email=document.getElementById("Email").value;
//邮箱正则
var regx=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,4}$/;
var falg2=regx.test(email);
var em=document.getElementById("em");
if(falg2){
em.innerHTML="<font color=‘green‘>邮箱规则正确..</font>"
}else{
em.innerHTML="<font color=‘red‘>邮箱规则错误!!</font>"
}
return falg2;
}
//重置功能扩展
function checkClear(){
var us=document.getElementById("us");
var up=document.getElementById("up");
var em=document.getElementById("em");
up.innerHTML=null;
us.innerHTML=null;
em.innerHTML=null;
}
//验证单选框
function checkRedio(){
var cho=document.getElementById("ra");
var flag3=true;
if(cho.checked==true){
return flag3;
}else{
alert("sorry,请先阅读网络协....")
flag3 =false;
return flag3;
}
}
//验证所有，都正确就提交
function checkAll(){
return checkUsername() && checkPwd() && checkEmail() && checkRedio();
}
</script>
</body>
</html>
运行结果展示：
1.初始界面：
2.表单验证（错误输入）：
3.重置展示：
4.表单验证正确输入（单选框未选中点击注册）：
5.单验证正确输入（单选框选中点击注册）：
跳转：
三．页面时钟的展示
1.基本思路就是让每隔一秒更新一次当前时间
2.简易代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面时钟</title>
</head>
<body>
<div id="mytime">haha</div>
</body>
<script type="text/javascript">
function showTime(){
var ti=document.getElementById("mytime");
var nowTime=new Date().toLocaleString();
ti.innerHTML=nowTime;
}
//手动调用
showTime();
//设置定时器
window.setInterval(‘showTime()‘,1000)
</script>
</html>
运行结果：
第二次截图：
3.引用代码：
地址链接：https://www.cnblogs.com/syp172654682/p/7588104.html
写的很好，特借鉴过来
引用代码复制：
外部CSS代码：
/* 全局 */
* {
margin: 0;
padding: 0;
}
.clock {
width: 400px;
height: 400px;
border: 10px solid #333;
box-shadow: 0px 0px 20px 3px #444 inset;
border-radius: 210px;
position: relative;
margin: 5px auto;
z-index: 10;
background-color: #f6f6f6;
}
/* 时钟数字 */
.clock-num {
width: 40px;
height: 40px;
font-size: 22px;
text-align: center;
line-height: 40px;
position: absolute;
z-index: 8;
color: #555;
font-family: fantasy, ‘Trebuchet MS‘;
}
.em_num {
font-size: 28px;
}
/* 指针 */
.clock-line {
position: absolute;
z-index: 20;
}
.hour-line {
width: 100px;
height: 4px;
top: 198px;
left: 200px;
background-color: #000;
border-radius: 2px;
transform-origin: 0 50%;
box-shadow: 1px -3px 8px 3px #aaa;
}
.minute-line {
width: 130px;
height: 2px;
top: 199px;
left: 190px;
background-color: #000;
transform-origin: 7.692% 50%;
box-shadow: 1px -3px 8px 1px #aaa;
}
.second-line {
width: 170px;
height: 1px;
top: 199.5px;
left: 180px;
background-color: #f60;
transform-origin: 11.765% 50%;
box-shadow: 1px -3px 7px 1px #bbb;
}
/* 原点 */
.origin {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #000;
position: absolute;
top: 190px;
left: 190px;
z-index: 14;
}
/* 日期 时间 */
.date-info {
width: 160px;
height: 28px;
line-height: 28px;
text-align: center;
position: absolute;
top: 230px;
left: 120px;
z-index: 11;
color: #555;
font-weight: bold;
font-family: ‘微软雅黑‘;
}
.time-info {
width: 92px;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
top: 270px;
left: 154px;
z-index: 11;
background-color: #555;
padding: 0;
box-shadow: 0px 0px 9px 2px #222 inset;
}
.time {
width: 30px;
height: 30px;
text-align: center;
float: left;
color: #fff;
font-weight: bold;
}
#minute-time {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
/* 刻度 */
.clock-scale {
width: 195px;
height: 2px;
transform-origin: 0% 50%;
z-index: 7;
position: absolute;
top: 199px;
left: 200px;
}
.scale-show {
width: 12px;
height: 2px;
background-color: #555;
float: left;
}
.scale-hidden {
width: 183px;
height: 2px;
float: left;
}外部js代码：
(function() {
window.onload = initNumXY(200, 160, 40, 40);
var hour_line = document.getElementById("hour-line");
var minute_line = document.getElementById("minute-line");
var second_line = document.getElementById("second-line");
var date_info = document.getElementById("date-info");
var week_day = [
‘星期日‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘
];
var hour_time = document.getElementById("hour-time");
var minute_time = document.getElementById("minute-time");
var second_time = document.getElementById("second-time");
function setTime() {
var this_day = new Date();
var hour = (this_day.getHours() >= 12) ?
(this_day.getHours() - 12) : this_day.getHours();
var minute = this_day.getMinutes();
var second = this_day.getSeconds();
var hour_rotate = (hour * 30 - 90) + (Math.floor(minute / 12) * 6);
var year = this_day.getFullYear();
var month = ((this_day.getMonth() + 1) < 10) ?
"0" + (this_day.getMonth() + 1) : (this_day.getMonth() + 1);
var date = (this_day.getDate() < 10) ?
"0" + this_day.getDate() : this_day.getDate();
var day = this_day.getDay();
hour_line.style.transform = ‘rotate(‘ + hour_rotate + ‘deg)‘;
minute_line.style.transform = ‘rotate(‘ + (minute * 6 - 90) + ‘deg)‘;
second_line.style.transform = ‘rotate(‘ + (second * 6 - 90) + ‘deg)‘;
date_info.innerHTML =
year + "-" + month + "-" + date + " " + week_day[day];
hour_time.innerHTML = (this_day.getHours() < 10) ?
"0" + this_day.getHours() : this_day.getHours();
minute_time.innerHTML = (this_day.getMinutes() < 10) ?
"0" + this_day.getMinutes() : this_day.getMinutes();
second_time.innerHTML = (this_day.getSeconds() < 10) ?
"0" + this_day.getSeconds() : this_day.getSeconds();
}
setInterval(setTime, 1000);
function initNumXY(R, r, w, h) {
var numXY = [{
"left": R + 0.5 * r - 0.5 * w,
"top": R - 0.5 * r * 1.73205 - 0.5 * h
}, {
"left": R + 0.5 * r * 1.73205 - 0.5 * w,
"top": R - 0.5 * r - 0.5 * h
}, {
"left": R + r - 0.5 * w,
"top": R - 0.5 * h
}, {
"left": R + 0.5 * r * 1.73205 - 0.5 * w,
"top": R + 0.5 * r - 0.5 * h
}, {
"left": R + 0.5 * r - 0.5 * w,
"top": R + 0.5 * r * 1.732 - 0.5 * h
}, {
"left": R - 0.5 * w,
"top": R + r - 0.5 * h
}, {
"left": R - 0.5 * r - 0.5 * w,
"top": R + 0.5 * r * 1.732 - 0.5 * h
}, {
"left": R - 0.5 * r * 1.73205 - 0.5 * w,
"top": R + 0.5 * r - 0.5 * h
}, {
"left": R - r - 0.5 * w,
"top": R - 0.5 * h
}, {
"left": R - 0.5 * r * 1.73205 - 0.5 * w,
"top": R - 0.5 * r - 0.5 * h
}, {
"left": R - 0.5 * r - 0.5 * w,
"top": R - 0.5 * r * 1.73205 - 0.5 * h
}, {
"left": R - 0.5 * w,
"top": R - r - 0.5 * h
}];
var clock = document.getElementById("clock");
for (var i = 1; i <= 12; i++) {
if (i % 3 == 0) {
clock.innerHTML += "<div class=‘clock-num em_num‘>" + i + "</div>";
} else {
clock.innerHTML += "<div class=‘clock-num‘>" + i + "</div>";
}
}
var clock_num = document.getElementsByClassName("clock-num");
for (var i = 0; i < clock_num.length; i++) {
clock_num[i].style.left = numXY[i].left + ‘px‘;
clock_num[i].style.top = numXY[i].top + ‘px‘;
}
for (var i = 0; i < 60; i++) {
clock.innerHTML += "<div class=‘clock-scale‘> " +
"<div class=‘scale-hidden‘></div>" +
"<div class=‘scale-show‘></div>" +
"</div>";
}
var scale = document.getElementsByClassName("clock-scale");
for (var i = 0; i < scale.length; i++) {
scale[i].style.transform = "rotate(" + (i * 6 - 90) + "deg)";
}
}
})();Html代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel=‘stylesheet‘ type="text/css" href="css/页面时钟.css" />
<title>时钟</title>
</head>
<body style="text-align: center;">
<h3>页面时钟展示</h3>
<div class="clock" id="clock">
<!-- 原点 -->
<div class="origin"></div>
<!-- 时分秒针 -->
<div class="clock-line hour-line" id="hour-line"></div>
<div class="clock-line minute-line" id="minute-line"></div>
<div class="clock-line second-line" id="second-line"></div>
<!-- 日期 -->
<div class="date-info" id="date-info"></div>
<!-- 时间 -->
<div class="time-info">
<div class="time" id="hour-time"></div>
<div class="time" id="minute-time"></div>
<div class="time" id="second-time"></div>
</div>
</div>
<script type=‘text/javascript‘ src="js/页面时钟.js"></script>
</body>
</html>运行结果：
【总结完毕】以上是关于Java学习总计（二十六）——JavaScript正则表达式，Js表单验证,原生js+css页面时钟的主要内容，如果未能解决你的问题，请参考以下文章
HTML5学习笔记（二十六）：JavaScript的错误处理
“全栈2019”Java多线程第二十六章：同步方法生产者与消费者线程