zoukankan      html  css  js  c++  java
  • 小试牛刀2:JavaScript基础题

    JavaScript基础题

    1、网页中有个字符串“我有一个梦想”,使用JavaScript获取该字符串的长度,同时输出字符串最后两个字。

    答案:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <script type="text/javascript">
    10     var str = "我有一个梦想";
    11     len = str.length;
    12     st = str.substr(4,2);
    13     document.write("字符串长度为:" + len + "<br>" + "字符串最后两个字为:" +st);
    14 </script>
    15 </body>
    16 </html>

      结果:

      *还可以通过字符串长度.length属性来动态截取字符串*:

    1 <script type="text/javascript">
    2     var str = "我有一个梦想";
    3     st = str.substr(str.length-2,2);    
    4     document.write("字符串最后两个字为:" +st);
    5 </script>

      结果:


    2、制作成绩输出表,判断学生的成绩是否大于60,是的话在页面中输出“你及格了”,不是的话则输出“你不及格”。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <script type="text/javascript">
    10     function checktext() {
    11         var str = document.getElementById("text").value;
    12         if (str>60)    
    13             alert("你及格了");
    14         else 
    15             alert("你不及格");
    16     }
    17 </script>
    18 
    19 请输入成绩:<input type="text" id="text" />
    20         <input type="button" onclick="checktext()" value="提交" />
    21 </body>
    22 </html>

      结果:


    3、输出九九乘法表

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <script type="text/javascript">
    10     var arr = new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array());     //定义二维数组
    11     var i , j ;    //i表示九九乘法表里的行,j表示列
    12     for(j = 1 ; j <= 9 ; j++) {
    13         for(i = 1 ; i <= 9 ; i++) {
    14             if(j<=i) 
    15                 arr[i-1][j-1] = i * j ;
    16         }
    17     }
    18     for(i = 1 ; i <= 9 ; i++) {
    19         for(j = 1 ; j <= 9 ; j++) {
    20             if(j<=i)
    21                 document.write(" "+j+"*"+i+"="+arr[i-1][j-1]);
    22         }
    23         document.write("<br>");
    24     }
    25 </script>
    26 </body>
    27 </html>

      效果:


    4、页面中一个文本输入框,当该文本框获得焦点时,弹出一个窗口提示用户“你获得了文本框”;当文本框失去焦点时,弹出一个窗口提示用户“文本框失去了你“。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <input type="text" onfocus="alert('你获得了文本框')" onblur="alert('文本框失去了你')" />
    10 </body>
    11 </html>

      效果:

      注意:alert()里面要用单引号,因为外面已经使用过双引号,如果继续使用双引号的话,提示框不会弹出


    5、制作倒计时

    eg:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>倒计时</title>
     6 <script language="JavaScript">
     7     var nextYear = new Date("1/1/2016");      //nextYear为2016年元旦那一天
     8     var nowDay = new Date();    //nowDay为当前的时间
     9     var seconds = nextYear.getTime() - nowDay.getTime();  //seconds是现在距离元旦的毫秒数
    10     var days = Math.floor(seconds/(1000*60*60*24));     
    11     if(days > 0) {
    12         document.write("距离元旦还有"+days+"天!");
    13     }
    14     else if(days == 0) document.write("今天就是元旦哦!祝你元旦快乐!");
    15     else document.write("元旦已经过了呀!");
    16 </script>     
    17 </head>
    18 
    19 <body>
    20 
    21 </body>
    22 </html>

      效果:(2015.12.8)

      重要知识点:

        (1)floor()函数:其功能是“向下取整”,或者说“向下舍入”,即取不大于x的最大整数(与“四舍五入”不同,下取整是直接取按照数轴上最接近要求的值左边的值,也就                                                  是不大于要求的值的最大的那个)。

        (2)getTime() 方法:getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。两个指定时间的getTime()方法相减,得到的是这两个指定时间相距的毫秒数。

  • 相关阅读:
    Helpers Overview
    Validation
    Support Facades
    Session Store
    位运算(参考百科)
    开源项目_可能使用到的开源项目集合
    秒杀系统架构分析与实战(转)
    shell命令之根据字符串查询文件对应行记录
    MySQL做为手动开启事务用法
    spring 加载bean过程源码简易解剖(转载)
  • 原文地址:https://www.cnblogs.com/jasmine-95/p/5026788.html
Copyright © 2011-2022 走看看