【how2j练习题】JS部分阶段练习

日光倾

已于 2024-04-07 20:20:25 修改

阅读量165

点赞数 2

分类专栏： HTML、CSS、JS学习笔记文章标签： javascript 开发语言 ecmascript

于 2024-04-04 15:53:53 首次发布

本文链接：https://blog.csdn.net/diguangxihua/article/details/137292102

版权

HTML、CSS、JS学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

练习题 1

在这里插入图片描述

<!-- 练习：自定义一个函数，对数组进行排序，要求排序后没有重复数据 -->
<script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }


    function uniquel(arr){ 
        var hash=[];
        for(var i =0;i<arr.length;i++){
            if(hash.indexOf(arr[i]) == -1){
                hash.push(arr[i]);
            }
        }
        return hash;
    }

    var x = new Array(1,3,4,5,7,7,4,5,6,7,7);
    p('数组x是'+x);

    var y = uniquel(x);
    p('使用sort进行自定义倒排序后的数组x是'+y);

</script>

练习题 2

在这里插入图片描述

<!-- 关键字 new Array 创建数组对象 -->
<!--创建数组对象的3种方式:
    1. new Array()   创建长度是0的数组
    2. new Array(5)  创建长度是5的数组，但每一个元素都是undefine
    3.new Array(3,1,4,1,5,9,2,6) 根据参数创建数组
-->
<!-- <script>
    function p(s,v){
        document.write(s + ' '+ v);
        document.write("<br>");
    }

var x = new Array(); // 创建长度是0的数组
p('通过new Array（）创建一个空数组:',x);

x = new Array(5); //创建长度是5的数组，但每一个元素都是indefine
p('通过new Array(5)创建一个长度为5的数组',x);

x = new Array(3,1,4,1,5,9,2,6);//根据参数创建数组
p('创建有初始值的数组new Array(3,1,4,1,5,9,2,6)',x);
</script> -->

<!-- 属性 length 数组长度 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4,1,5,9,2,6); // 根据参数创建数组
    p('当前数组是'+x);
    p('通过.length获取当前数组的长度'+ x.length)
</script> -->


<!-- for // for in 遍历一个数组 -->
<!--
    遍历有两种方式：
    1.结合for循环，通过下标遍历
    2.使用增强for in循环遍历
-->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4);
    p('当前数组是'+x);
    p("使用普通的for循环遍历数组");
    for(i=0;i<x.length;i++){
        p(x[i]);
    }
    p("使用增强for循环遍历数组");
    for(i in x){
        p(x[i]);
    }
</script> -->


<!-- 方法concat 连接数组 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4);
    var y = new Array(1,5,9);
    p('数组x是'+x);
    p('数组y是'+y);

    var z = x.concat(y);
    p('使用concat连接数组x和y');
    p('数组z是'+z);
    
</script> -->


<!-- 方法join 通过指定分隔符，返回一个数组的字符串表达 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4);
    p('数组x是'+x);
    var y = x.join();
    p('y = x.join()得到的是数组x的字符串表达。其值是'+y +"其类型是:"+(typeof y));
    var z = x.join("@");
    p('z=x.join("@")是x的字符串表达，但是分隔符不是默认的，是@'+z);
</script> -->



<!-- 方法push插入数据 pop获取数据 分别在最后的位置和（获取后删除） -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }

    var x = new Array(3,1,4);
    p('数组x是'+x);

    x.push(5);
    p('向x中push 5，得到'+ x);

    var e = x.pop();
    p('从x中pop一个值出来，其值是'+e);

    p('pop之后，x数组的值是'+x);
</script>


 -->


<!-- 方法unshift shift 分别在最开始的位置插入数据和获取数据（获取后删除） -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }

    var x = new Array(3,1,4);
    p('数组x是'+x);

    x.unshift(5);
    p('对数组unshift值加5，数组变为'+x);

    var e  = x.shift();
    p('从数组中shift一个数，其值是'+e);

    p('shift之后，数组变为'+x);
</script> -->




<!-- 方法sort 对数组内容进行排序 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4,1,5,9,2,6);
    p('数组x是'+x);
    x.sort();
    p('使用sort排序后的数组x是'+x);d
</script> -->


<!-- 方法sort(comparator) 自定义排序算法 -->
<!--sort()默认正排序，即小的数排在前面。如果需要采用自定义排序的算法，就把比较器函数作为参数传递给sort()-->

<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    function comparator(v1,v2){ //比较器函数
        return v2-v1;
    }

    var x = new Array(3,1,4,1,5,9,2,6);
    p('数组x是'+x);
    x.sort(comparator);
    p('使用sort进行自定义倒排序后的数组x是'+x);
</script> -->



<!-- 练习：自定义一个函数，对数组进行排序，要求排序后没有重复数据 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }


    function uniquel(arr){ 
        var hash=[];
        for(var i =0;i<arr.length;i++){
            if(hash.indexOf(arr[i]) == -1){
                hash.push(arr[i]);
            }
        }
        return hash;
    }

    var x = new Array(1,3,4,5,7,7,4,5,6,7,7);
    p('数组x是'+x);

    var y = uniquel(x);
    p('使用sort进行自定义倒排序后的数组x是'+y);

</script> -->

<!-- 方法 reverse，对数组的内容进行反转 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4,1,5,9,2,6);
    p('数组x是'+x);
    x.reverse();
    p('使用reverse函数进行反转后的值是:'+x);
</script> -->

<!-- 方法slice获取子数组 注意：第二个参数取不到
 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
var y = x.slice(1);
p('x.slice(1)获取的子数组是:'+y);
var z = x.slice(1,3);
p('x.slice(1,3)获取的子数组是:'+z);
p('第二个参数取不到');
</script> -->

<!-- 方法splice用于删除数组中元素
而且同时还能向数组中插入元素 -->
<!-- <script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var x = new Array(3,1,4,1,5,9,2,6);
    p('数组x是'+x);
    x.splice(3,2);
    p('x.splice (3,2) 表示从位置3开始 ，删除2个元素:'+x);

    x.splice(3,0,1,5);
    p('x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:'+x);
</script> -->


<!--完成字符串替换功能-->

<html>

<script>
    function getValue(id){
        return document.getElementById(id).value; //获得不同id的多选框里输入的内容
    }
    function setValue(id,value){
        document.getElementById(id).value = value; //根据id修改不同多选框里的内容
    }

    function get1(){
        var text1 = getValue("text1");//获得第一个多选框里的结果
        var a = new Array();//新创建一个数组
        for(var i =0;i<text1.length;i++){
            var c = text1.charAt(i); //获得每个位置上的字符
            a.push(c);  //把c里的内容加到空的数组a里面
        }
        a.sort(); //对a中的内容进行排序
        var text2 = a.join(""); // 把数组a的内容转换成字符串形式
        setValue("text2",text2);//把id为text2的文本框里填入text2里的内容
        a.reverse();//倒序输出
        var text3 = a.join("")
        setValue("text3",text3);

    }
    
    function get2(){

        var text1 = getValue("text1");//获得第一个多选框里的结果
        var a = text1.split(" "); //把第一个多选框里的字母用空格隔开
        a.sort();//对a中的内容进行排序
        var text2 = a.join(" ");//转为字符串类型
        setValue("text2",text2);//把id为text2的文本框里填入text2里的内容
        a.reverse();//倒序输出
        var text3 = a.join(" ")
        setValue("text3",text3);

    }
    
</script>






<table border="0">
    
    <tr>
        <td>
            随机输入英文字符串:	
        </td>
        <td>
            <textarea id="text1"></textarea>
        </td>
    </tr>

    <tr>
        <td>正排序结果：</td>
        <td>
            <textarea id="text2"></textarea>
        </td>
    </tr>
    
    <tr>
        <td>倒排序结果：</td>
        <td>
            <textarea  id="text3"></textarea>
        </td>
    </tr>

    <tr>
        <td></td>
        <td>
            <button onclick="get1()" >按照字母排序</button>
        </td>
    </tr>

    <tr>
        <td></td>
        <td>
        </br>
             <button onclick="get2()" >按照单词排序</button>
        </td>
    </tr>
    
</table>
</html>

练习题 3

在这里插入图片描述

<!-- 练习-计算年龄 -->

<html>

<script>
    // 循环输出年月日函数
    function initSelect(obj,start,end){
        
        for(var i = start ; i<=end ; i++) {
            
            // 在obj对象下添加条目，文本为i,值为i

            obj.options.add(new Option(i,i))
        }
    }

    //年、月输出天数的函数
    function selectYmd(){
        //用getElementById()方法，返回指定id的元素
        //返回年
        var yy  = document.getElementById("years");
        //返回月
        var mm  = document.getElementById("months");
        //返回日
        var dd  = document.getElementById("dates");

        //将月的value转换成数字类型，便于比较
        var m = parseInt(mm.value);
        //生名最后天数，用于接收判断结果
        var dayEnd;

        //判断并输出天数
        if(m == 4 || m == 6 || m==9 || m==11){
            dayEnd = 30;
        }else if(m==2){
            datEnd = 28;  // 2月28天
            
            y = parseInt(yy.value); //闰年29天
            if((y%4==0&&y%100!=0)||(y%400==0)){
                dayEnd = 29;
            }
            
        }else{
            dayEnd = 31;
        }
        //删除已经输出的31天
        dd.options.length = 0;
        //重新判断输出的天数，dayEnd为最后一天
        initSelect(dd,1,dayEnd);
    }


    //函数Ymd() 增加下拉年、月、日的条件
    function ymd(){
        //获取时间Date对象，用于处理日期和时间
        var d = new Date();
        //获取当前年份
        var nowYear = d.getFullYear();
        //用getElementById()方法，返回指定id的元素
        //返回年
        var yy  = document.getElementById("years");
        //返回月
        var mm  = document.getElementById("months");
        //返回日
        var dd  = document.getElementById("dates");
        //调用initSelect（）函数
        //输出年下拉框的年份，从1999-今年
        initSelect(yy,1999,nowYear);

        initSelect(mm,1,12);
        initSelect(dd,1,31);

    }

    //函数calculateAge 计算年龄
    function calculateAge(){
       // 1.获取当前日期
        var currentDate = new Date();
        //获取当前日期中的当前年
        currentYear = currentDate.getFullYear();
        //获取当前日期中的当前月（从0开始要+1）
        currentMonth = currentDate.getMonth()+1;
        //获取当前日期中的当前日
        currentDate = currentDate.getDate();

        //2.获取下拉框里的日期信息
        //2.1.首先获得下拉框的节点对象
        var selectY = document.getElementById("years");
        //2.在获得下拉框所有的option的节点对象
        var optionsY = selectY.options;
        //3.获得当前选中的option的索引
        var indexY = selectY.selectedIndex;
        //4.获得当前选中的option的文本内容 使用option[index]下标的方法得到当前选中的option
        var selectedYear = optionsY[indexY].text;

        //2.获取下拉框里的日期信息
        //2.1.首先获得下拉框的节点对象
        var selectM = document.getElementById("months");
        //2.在获得下拉框所有的option的节点对象
        var optionsM = selectM.options;
        //3.获得当前选中的option的索引
        var indexM = selectM.selectedIndex;
        //4.获得当前选中的option的文本内容 使用option[index]下标的方法得到当前选中的option
        var selectedMonth = optionsM[indexM].text;

        //2.获取下拉框里的日期信息
        //2.1.首先获得下拉框的节点对象
        var selectD = document.getElementById("dates");
        //2.在获得下拉框所有的option的节点对象
        var optionsD = selectD.options;
        //3.获得当前选中的option的索引
        var indexD = selectD.selectedIndex;
        //4.获得当前选中的option的文本内容 使用option[index]下标的方法得到当前选中的option
        var selectedDate = optionsD[indexD].text;
        
        //当前年份和框中年份相减，输出当前的年份
        var age = currentYear - selectedYear;

        // 如果当前日期在出生日期之前,通过比较月份和日期的差异，将年龄减1
        if (
             currentMonth < selectedMonth ||
            (currentMonth === selectedMonth &&
            currentDate < selectedDate)
         ) {
             age--;
     }

     document.write('今年'+age +'岁');

        
        // var age2 = currentMonth - selectedMonth;
        // var age3 = currentDate - selectedDate;

        // document.write(age2);
        // document.write(age3);
    }

</script>
<!-- 
    onload 刷新加载页面，执行ymd()函数 -->
    <body onload="ymd()">
    
        <h3>请输入出生年月日</h3>
        </br>

        <form action="">
                <!-- onchange()事件，当用户改变年、月时，触动函数selectYmd()函数 -->

                 <select name = "years" id ="years" onchange="selectYmd()"></select>年
                 <select name = "months" id ="months" onchange="selectYmd()"></select>月
                 <select name = "datas" id ="dates"></select>日
        </form>
        </br>
        <button onclick="calculateAge()">计算年龄</button>
        
    
    </body>


</html>