• 小试牛刀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()方法相减,得到的是这两个指定时间相距的毫秒数。

  • 相关阅读:
    小师妹学JVM之:JIT中的PrintCompilation
    八张图彻底了解JDK8 GC调优秘籍-附PDF下载
    区块链系列教程之:比特币中的网络和区块链
    从印度兵力分布聊聊Mybatis中#和$的区别
    区块链系列教程之:比特币的钱包与交易
    小师妹学JVM之:JIT中的LogCompilation
    从发布-订阅模式谈谈 Flask 的 Signals
    基于 Ajax 请求的 Flask-Login 认证
    解决 openpyxl 垂直分页符和水平分页符同时添加的问题
    用 python 抓取知乎指定回答下的视频
  • 原文地址:https://www.cnblogs.com/jasmine-95/p/5026788.html
Copyright © 2020-2023  润新知