菜鸡小窝 菜鸡小窝

jquery月考试题

in 学习 read (1235) 文章转载请注明来源!

大概学了一个月的jquery,按照学校说的每学一个月就要进行一次考试了,这次考试理所应当的是jquery了,我还是把试题发出来吧,有兴趣的大佬可以试下(都是最基础的东西)。
这里就是试题的链接了
上面的选择题先不说,(三短一长选最长,三长一短选最短。。。)看下上机题吧,第一题是这个样子
第一题
首先我写的html部分是这样

<body>
    <form>
        <h1 style="color: cornflowerblue;">新用户注册</h1><br />
        <hr /><br /> 用户名:
        <input type="text" id="name" /><span id="sp1" style="color: red"></span><br /> 密码:
        <input type="password" id="p1" /><span id="sp2" style="color: red"></span><br /> 确认密码:
        <input type="password" id="p2" /><span id="sp3" style="color: red"></span><br /> 手机号:
        <input type="text" id="num" /><span id="sp4" style="color: red"></span><br /> 验证码:
        <input type="text" id="yzm" /><span id="sp5" style="color: red"></span><br />
        <input type="checkbox" id="ty" />同意用户条款<br />
        <input id="wc" type="button" value="注册完成" />
        <div id="xs"></div>
    </form>
</body>

html部分没什么说的,大致是那个意思就行,至于为什么完成按钮不用submit而用button,是因为用了submit后页面就会跳转。
就达不到题目要求的在下面显示输入的信息的功能了
然后script部分是:

<script>
    $(function() {
        $("#wc").click(function() {
            var name = $("#name").val();
            var p1 = $("#p1").val();
            var p2 = $("#p2").val();
            var num = $("#num").val();
            var yzm = $("#yzm").val();
            var numc = /^1\d{10}$/; //手机号码正则表达式
            var namec = /^[a-zA-Z0-9]{6,18}$/; //用户名正则表达式
            var pc = /^[a-zA-Z0-9]{6,16}$/; //密码正则表达式
            if(name == "") {
                $("#sp1").html("用户名不能为空");
            } else if(namec.test(name) == false) {
                $("#sp1").html("用户名格式错误");
            } else {
                var a = true;
            }
            if(p1 == "") {
                $("#sp2").html("密码不能为空");
            } else if(pc.test(p1) == false) {
                $("#sp2").html("密码密码格式不正确");
            } else {
                var b = true;
            }
            if(p2 != p1) {
                $("#sp3").html("前后输入密码不一致");
            } else {
                var c = true;
            }
            if(num == "") {
                $("#sp4").html("手机号不能为空");
            } else if(numc.test(num) == false) {
                $("#sp4").html("手机格式不正确");
            } else {
                var d = true;
            }
            if(yzm == "") {
                $("#sp5").html("验证不能为空");
            } else {
                var e = true;
            }
            var b = $("#ty")[0].checked;
            if(a && b && c && d && e) {
                var html = "<br />用户名是:" + name + "<br />密码是:" + p1 + "<br />手机号是:" + num + "<br />验证码是:" + yzm;
                $("#xs").html(html);
            }
            if(b == false) {
                alert("请同意用户条款");
            }
        });
    });
</script>

这道题不难都是一些基础的东西,就是我正则表达式不会写(那节课没有认真听)
这样写其实是有问题的,因为如果输错一次的话这个页面就需要刷新一下才能再填写,不刷新的话就算重新填写正确后面的红字也不会消失,解决也不难解决,只是考试时间有限,没必要在这个方面浪费时间。
然后是第二题:
第二题
首先按照题目的要求做出大致样式:

<body style="text-align: center;">
    <div id="d1">设置时间:<input type="text" id="time" /> </div>
    <span style="color: red; font-size: 8em">00:00:<span id="ss">00</span></span>
    <div>
        <input type="button" value="开始" id="start" />
        <input type="button" value="结束" id="stop" />
    </div>
</body>

根据题目表达的意思得知只需要做秒钟的倒计时就行了,所以很简单,使用setInterval方法每次让秒数减去1就行了,
当秒数小于等于0或者点击停止时使用clearInterval关闭计时就行了,代码比较简单大致如下:

<script>
    $(function() {
        var i;
        $("#time").blur(function() {
            var time = $(this).val();
            var rtime = /^([0-9]|[0-5][0-9]|60)$/;
            if(rtime.test(time) == false) {
                alert("输入错误,定时时间范围0—60秒")
            } else if(time >= 10) {
                $("#ss").html(time);
                $("#d1").hide();
            } else {
                $("#ss").html("0" + time);
                $("#d1").hide();
            }
        });

        function fn1() {
            var time = $("#ss").html();
            time--
            if(time >= 10) {
                $("#ss").html(time);
            } else if(time < 10 && time >= 0) {
                $("#ss").html("0" + time);
            } else {
                clearInterval(i);
                $("#d1").show();
            }
        };
        $("#start").click(function() {
            i = setInterval(fn1, 1000);
        });
        $("#stop").click(function() {
            clearInterval(i);
        });
    });
</script>
学习
发表新评论
已有 11 条评论
  1. w4ctech
    w4ctech 10Chrome 71
    回复

    八级命名?

    1. 吃枣药丸
      吃枣药丸本文作者 10Chrome 70
      回复

      @w4ctech 23333比较随意啦

  2. 冯小贤
    冯小贤 10Chrome 70
    回复

    一些的作业,拿走不谢
    http://lab.flxxyz.com/

    1. 吃枣药丸
      吃枣药丸本文作者 10Chrome 70
      回复

      @冯小贤 好东西,谢谢大佬

  3. 君华
    君华 7Chrome 70
    回复

    我也正准备在高中学习下这些(如果计算机课或者社团教的话!)

    1. 吃枣药丸
      吃枣药丸本文作者 10Chrome 70
      回复

      @君华 就算学也要记住java是辣鸡,php最牛逼!

      1. 君华
        君华 7Chrome 70
        回复

        @吃枣药丸 都得有所涉及的吧

        1. 吃枣药丸
          吃枣药丸本文作者 PChrome 69
          回复

          @君华 确实是,但是java一般都是基佬,比如楼下那位

          1. 君华
            君华 7Chrome 70
            回复

            @吃枣药丸 哈哈

  4. mathor
    mathor 10Chrome 66
    回复

    laji东西

    1. 吃枣药丸
      吃枣药丸本文作者 10Chrome 70
      回复

      @mathor laji

前篇 后篇
0:00