HTML相关试题

1、判断第二个日期比第一个日期大

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
< %
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
<head>
<base href="<%=basePath%>">
<title>判断第二个日期比第一个日期大</title>
    
    <script type="text/javascript">
        window.onload = function()
        {
            //这么写是为了实现js代码与html代码的分离，当我修改js时，不能影响html代码。
            document.getElementByIdx_x("frm1").onsubmit =
                function(){
                    var d1 = this.d1.value;
                    var d2 = this.d2.value;
                    if(!verifyDate (d1)) {alert("第一个日期格式不对");return false;}
                    if(!verifyDate (d2)) {alert("第二个日期格式不对");return false;}
                    if(!compareDate(d1,d2)) {alert("第二个日期比第一日期小");return false;}
                };
        }

        function compareDate(d1,d2)
        {
            var arrayD1 = d1.split("-");
            var date1 = new Date(arrayD1[0],arrayD1[1],arrayD1[2]);
            
            var arrayD2 = d2.split("-");
            var date2 = new Date(arrayD2[0],arrayD2[1],arrayD2[2]);
            
            if(date1 > date2) return false;
            return true;
        }

        function verifyDate(d)
        {
            var datePattern = /^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
            return datePattern.test(d);
        }
    < /script>
</head>
    
<body>
    <form id="frm1" action="xxx.html">
    <input type="text" name="d1" />
    <input type="text" name="d2" />
    <input type="submit" />
    </form>

</body>
< /html>

 

2、用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!DOCTYPE HTML>  
<html>  
  <head>  
      <script type="text/javascript">  
        window.onload=function() {  
    
               //getElementById可返回对拥有指定 ID 的第一个对象的引用。
               var tbl = document.getElementById("tbl"); 
    
                // getElementsByTagName（) 方法可返回带有指定标签名的对象的集合。
               var rows = tbl.getElementsByTagName("tr");  
    
               for(i=0;i<rows.length;i++) {  
                      var j = parseInt(i/3); // 此语句的效果是,以3个为单位,000 111 222 333 444 ...  
                      if(j%2==0) rows[i].style.backgroundColor="#f00";  
                      else  rows[i].style.backgroundColor="#0f0";  
               }  
        };  
      </script>  
  </head>  
          
  <body>  
    <table id="tbl" border="1">  
       <tr><td>1</td></tr>  
       <tr><td>2</td></tr>  
       <tr><td>3</td></tr>  
       <tr><td>4</td></tr>  
       <tr><td>5</td></tr>  
       <tr><td>6</td></tr>  
       <tr><td>7</td></tr>  
       <tr><td>8</td></tr>  
       <tr><td>9</td></tr>  
       <tr><td>10</td></tr>   
    </table>  
  </body>  
</html>

 

3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交?

<form οnsubmit=’return chkForm(this)’>

<input type="text" name="d1"/>

<input type="submit"/>

</form>

<script type=”text/javascript” />   

function chkForm(this)

       {
              var value = this.d1.value;

              var len = value.length;

              for(var i = 0;i < len;i++)

              {
                     if(value.charAt(i)>"9"|| value.charAt(i)<"0")

                     {
                            alert("含有非数字字符");

                            return false;
                     }
              }

              return true;
       }

</script>

 

4、$(document).ready()和window.onload()，以及$(function() {})的区别：

　　（1）$(document).ready()和window.onload()的区别：

　　$(document).ready()：缩写为$(fn),在DOM文档载入完成之后执行的函数，DOM结构绘制完毕后就执行，表示文档结构已经加载完成（不包含图片等非文字媒体文件），可同时编写多个且执行。

 

　　window.onload()：等到页面包括图片的所有元素加载完毕之后才执行，只编写且执行一个。

　　

　　（2）“$(function() {})”是“$(document).ready(function(){})”的缩写：

$(document).ready(function(){ 
    $("#titleDiv").load("content.do?type=list");
 })

$(function(){
  $("#titleDiv").load("content.do?type=list");
 });
posted on 2020-05-13 19:01  小潘同学  阅读(206)  评论(0)    收藏  举报
-->