前端学习阶段性练习题

回眸只為那壹抹淺笑 提交于 2020-03-29 07:08:15

1.在浏览器的控制台中打印九九乘法表

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

<script type="text/javascript">

        var str='';   // 1*1=1\t\n2*1=2\t2*2=4\t

        for(var i=1;i<10;i++){

            for(var j=1;j<=i;j++){

                str+=i+'*'+j+'='+(i*j)+'\t';

            }

            str+='\n';

        }

        console.log(str);  //控制台打印

</script>

</html>
View Code

2. 在浏览器的控制台中打印等边三角形

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

var index=11;   //行数必须是奇数

        var str='';    

        for(var i=1;i<=index;i++){

            //加入空格

            for(var j=0;j<index-i;j++){

                str+=' ';

            }

            //加入星星

            for(var x=0;x<2*i-1;x++){

                str+='*';

            }

            //加入换行

            str+='\n';    

        }

        console.log(str);

</script>

 

</html>
View Code

3. 统计1900-2018年的总天数

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

<script type="text/javascript">

        var sum=0;

        for(var i=1900;i<=2018;i++){

            if(i%400==0||(i%4==0&&i%100!=0)){

                sum+=366;

            }

            else{

                sum+=365;

            }

        }

        alert(sum);

</script>

</html>
View Code

4. 在网页中某2个文本框中输入要查询的年份和月份,求出对应的该月总天数

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

     <label>请输入年份:</label>

     <input id="year" type="text"/>

     <label>请输入月份:</label>

     <input id="month" type="text"/>

     <input id="but" type="button" value="开始计算"/></body><script type="text/javascript">         

         var yearNode=document.getElementById('year');

         var monthNode=document.getElementById('month');

         var buttonNode=document.getElementById('but');

         buttonNode.onclick=function(){

             //获取用户输入的年份和月份

             var year=yearNode.value;

             var month=monthNode.value;

             month=parseInt(month);

             switch(month){

                   //大月

                   case 1:

                   case 3:

                   case 5:

                   case 7:

                   case 8:

                   case 10:

                   case 12:

                       alert(year+'年'+month+'月有31天');

                       break;

                   //小月       

                   case 4:

                   case 6:

                   case 9:;

                   case 11:

                       alert(year+'年'+month+'月有30天');

                       break;

                   //二月

                   case 2:

                       if(year%400==0||(year%4==0&&year%100!=0)){

                           alert(year+'年'+month+'月有29天');

                       }

                       else{

                           alert(year+'年'+month+'月有28天');

                       }

                       break;

                   default:

                       alert('您输入的月份压根不存在');    

             }

         };

         </script>

</html>
View Code

5. 请将字符串"安徽省.合肥市.xxx.xxx"分割成数组.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

 var person=new String('安徽省’.’合肥市’.’高新区’.’浮山路');

        

        var arr=person.split('.');

        

        for(index in arr){

            console.log(   arr[index]  );

        }

</script>

</html>
View Code

6.请将字符串"游戏的目的是用来体会JavaScript高级语法的使用不需要具备抽象对象的能力,使用面向对象的方式分析问题,需要一个漫长的过程。"

  截取其中的"使用面向对象的方式分析问题"这句话。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

 var path='游戏的目的是用来体会JavaScript高级语法的使用不需要具备抽象对象的能力,使用面向对象的方式分析问题,需要一个漫长的过程。';

path=path.substring(41,54);

alert(path);

</script>

</html>
View Code

7.JS中原始数据类型分为哪几种?

6种原始数据类型:

  • Boolean: 布尔表示一个逻辑实体,可以有两个值:true  false
  • Number: 用于表示数字类型
  • String: 用于表示文本数据
  • Null: Null 类型只有一个值: null,特指对象的值未设置
  • Undefined: 一个没有被赋值的变量会有个默认值 undefined
  • Symbol: 符号(Symbols)ECMAScript6版新定义的。符号类型是唯一的并且是不可修

8.JS中有哪些常见的内置对象?

(1)Number (2)Boolean (3)String  (4)Array (5)Data (6)Math (7)RegExp

9.怎么将string/number转换成boolean

强制转换

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

var str1="";

        var str2="true";

        var str3="xxxxxxxx";

        str1=Boolean(str1);

        alert(str1);

 

        str2=Boolean(str2);

        alert(str2);

        

        str3=Boolean(str3);

        alert(str3);

 

        

        var num1=0;

        var num2=123;

        var num3=3.1415;

        

        alert(  Boolean(num1)   );

        alert(  Boolean(num2)   );

        alert(  Boolean(num3)   );

 

 

</script>

 

</html>
View Code

10.求出所有的水仙花数?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

  //求出所有的水仙花数

       //1.水仙花数是三位数

       //2.ABC   A*A*A+B*B*B+C*C*C==ABC

       //  798

       

       for(var num=100;num<1000;num++){

           var A=parseInt(num/100);

           var B=parseInt(num/10)%10;

           var C=num%10;

           if(A*A*A+B*B*B+C*C*C==num){

               console.log(num);

           }

       }


</script>


</html>
View Code

11. 随机定义一个number类型的数组,请求出该数组中的最大数字,以及最大数字出现的次数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>

</body>

<script type="text/javascript">

var arr3=new Array(10,20,30,40,50);

num = arr3.sort();
num.reverse();

//alert(num.length)

 console.log(num[0]);
 var j=0;
for(var i = 0;i<=num.length;i++){
    if(num[i]==num[0]){
        j++;
    }
}
console.log(j);
</script>
</html>
View Code

12.请打印[0,100]中所有的偶数.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

       var num=1;

       while(num<=100){

           if(num%2==0){

               console.log('数字:  '+num);

           }

           num++;

</script>

</html>
View Code

13.请打印出[1949~至今]所有的闰年。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

 

</body>

 

<script type="text/javascript">

var year=1949;
      while(year<=2019&&year>=1949){
       if( year%400==0  || (year%4==0&&year%100!=0) ){
       console.log('年份:  '+year);
       }
       year++;
      }

console.log(year);

 

</script>

 

</html>
View Code

14.CSS代码插入HTML的三种方式分别是?

插入方式一:内嵌样式

插入方式二:内部样式

插入方式三:外部样式

15.CSS的选择器有哪些?

1)基本选择器

2)属性选择器

3)伪元素选择器

4)层级选择器

16.在表单中input标签中的type属性有哪些?

(1 text

(2 password

(3 radio

(4 checkbox

(5 button

(6 submit

(7 reset

(8 image

(9 file

(10 hidden

17.JS代码插入的方式有哪几种?

1  内嵌JS代码

(2内部JS代码

(3 外部JS代码 

18.请用冒泡算法对下列数组进行排序,使用js代码实现.

   [22,32,12,11,98,14]

  var nums=[22,32,12,11,98,14];

        nums.sort();

        alert(nums);

19.请将下列数组的顺序调转,要求不能调用方法,自己使用js代码实现.

   [1020304050]

function arrReverse(arr){        //function 封装函数   arrReverse函数名称
          var newArr=[];           //新建多个空数组
          var b=[];
          var c=[];
          
          //for循环    arr.length获取长度(arr参数名称length获取参数长度)
          for(var i=0;i<arr.length;i++){ 
            var c = arr[i];
            var b = newArr.unshift(c);
            console.log(newArr);//控制台打印输出newArr 检测是否思路正确
          }
          return arr = newArr;//将newArr的值返回给arr
      }
     document.write(arrReverse([10,20,30,40,50]));

20.请使用以下格式打印当前的时间信息:

   当前时间: 2019/9/24/9:00  星期2

<script type="text/javascript">
//当前时间: 2019/9/24/9:00  星期2

var date=new Date();
console.log(date.toLocaleString());
console.log('今天是星期'+date.getDay());
</script>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!