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>
                密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" id="upwd" value="" placeholder="密码是6-12数字" name="pwd" onblur="checkPwd()"/><br />
                <span id="up"></span><br>
                邮&nbsp;&nbsp;&nbsp;&nbsp;箱:<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-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{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>

运行结果:

        【总结完毕】

原文地址:http://blog.51cto.com/13501268/2133738

时间: 2024-10-14 12:51:24

Java学习总计(二十六)——JavaScript正则表达式,Js表单验证,原生js+css页面时钟的相关文章

【Unity 3D】学习笔记二十六:unity游戏脚本(六)

在3D游戏世界中,任何一个游戏对象在创建的时候都会附带Transform(变换)组件,并且该组件是无法删除的,也不应该删除.在unity中,Transform面板一共有3个属性: Position  (位置) Rotation(旋转) Scale(缩放) 这三个值都是用来调整游戏对象在游戏界面中的位置,状态等相关参数. Position  (位置) 任何一个游戏对象的三维坐标都保存在Vector3容器中,该容器记录对象在X轴,Y轴,Z轴的坐标.一旦Vector33容器中的坐标发生变化,那么Sce

angular学习笔记(二十六)-$http(4)-设置请求超时

本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误 demo: html: <!DOCTYPE html> <html ng-app = 'HttpGet'> <head> <title>18.4 $http(2)</title> <meta charset="utf-8"

马哥学习笔记二十六——MySQL主从复制

配置MySQL复制基本步骤: 一.master 1.启用二进制日志 log-bin = master-bin log-bin-index = master-bin.index 2.选择一个惟一server-id server-id = {0-2^32} 3.创建具有复制权限的用户 REPLICATION SLAVE REPLICATION CLIENT 二.slave 1.启用中继日志 relay-log = relay-log relay-log-index = 2.选择一个惟一的server

9.26上午 JS\表单验证+正则表达式

表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. <body><form action="Untitled-1.html" method="post"><input type="text" name="uid" id="uid"  on

JavaScript:基础表单验证

在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个基础的表单(从标准来讲每一个元素都一定要存在有一个ID属性) <form action="pass.html" method="post" id="loginForm"> <!--在以后的开发过程之中,必须要保证id与name属性内

JAVA学习第三十六课(常用对象API)- 集合框架(四)— Set集合:HashSet集合演示

随着Java学习的深入,感觉大一时搞了一年的ACM,简直是明智之举,Java里很多数据结构.算法类的东西,理解起来就轻松多了 Set集合下有两大子类开发常用 HashSet集合 .TreeSet集合 Set集合的元素是不重复且无序 一.HashSet集合 API文档解释:此类实现 Set 接口,由哈希表(实际上是一个 HashMap 实例)支持.它不保证 set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null 元素. 此类为基本操作提供了稳定性能,注意,此实现不是同步的. 由上可

Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交

在Java EE应用编程中Servlet是基础,JSP是建立在Servlet基础之上的,其他Web框架如Struts.WebWork和Spring MVC都是基于Servlet的.本文主要讲述MyEclipse和Tomcat配置Servlet的过程和简单实现表单提交功能. 希望对大家有所帮助,参考书籍<Java EE企业级应用开发实例教程>. Java+MyEclipse+Tomcat (一)配置过程及jsp网站开发入门 一. Servlet编程 1.Web基础知识 在讲述Servlet之前,

【jQuery】学习jQuery插件的使用与写法(表单验证插件-validation)

最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示:实时验证. 三种不同的写法 1.1 确认哪个表单需要被验证,引入jquery.validate.js插件 <script type="text/javascript"> $(document).ready(function(){ $("#commentForm&qu

Java学习系列(二十四)Java正则表达式详解

转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/45501777 前言 正则表达式可以说是用来处理字符串的一把利器,它是一个专门匹配n个字符串的字符串模板,本质是查找和替换.在实例演示之前先了解一下Pattern.Matcher这两个工具类,Pattern:编译好的带匹配的模板(如:Pattern.compile("[a-z]{2}");/ / 取2个小写字母):Matcher:匹配目标字符串后产生的结果(如:pattern.m