JS基础编程测试题

Posted The Qing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS基础编程测试题相关的知识,希望对你有一定的参考价值。

1.编写一段程序实现如下需求:在网页上放置一个输入框,输入一个年龄数字,用来判断是否能进入网吧,如果年龄大于或等于18岁,弹出提示框可以进入,否则弹出提示框禁止入内.
方法1

 let age = prompt('')
        if (age >= 18) 
            alert('欢迎光临')
         else if (age < 18) 
            alert('禁止入内')
        

方法2

<input type="text" value=""> 
    <button>点击</button>
   
    <script>
       
        // 1.首先要获取到这个input输入框里面的值
         
         let btn = document.querySelector('button')
         //给按钮绑定一个点击事件
         btn.onclick = function()
            let input = document.querySelector('input').value //点一次获取一次
             if(input>=18)
                 alert('可以进入')
             else if(input<18)
                 alert('静止入内')
             

             
         

    </script>

2.编写一段代码找出数组[19,21,-2,98,33,6,0]的最大值
方法1 循环遍历

 let arr = [19,21,-2,98,33,6,0]
        //声明一个变量来存储最大值
        let max = arr[0]
        arr.forEach(function(item)
            if(max<item)
                max = item
            

        )
        console.log(max);

方法2 Math.max

let arr = [19,21,-2,98,33,6,0]
console.log(Math.max(...arr));

3.编写一个函数,将一个数组的最后一项移动到第一项,返回移动后的数组

 let arr =[6,8,9]
        function get_arr()
            // console.log();
            //console.log(arr[arr.length-1]);
            //console.log(arr.slice(arr.length-1,arr.length)[0]);
            let x = arr.pop()  // 获取数组最末尾元素
            arr.unshift(x)      // 把获取的数组最末尾元素,传入到数组的第一位
            console.log(arr);  // 打印原数组
        

4.编写一个函数,计算2个小数之间所有偶数的和(比如:计算 1.2 到9.7之间所有偶数的和)

 let sum = 0
        function fn(a,b)
            a = Math.floor(a) //参数进行向下取整
            b = Math.floor(b) //参数进行向下取整
            if(a>b)
                for(let i=b+1;i<=a;i++ )
                   if(i%2==0)
                   sum+=i
                   
                
                console.log(sum);
            else
                for(let i=a+1;i<=b;i++ )
                    if(i%2==0)
                   sum+=i
                   
                
                console.log(sum);
                
            
        
        fn(1.2,9.7)

5.模拟一个发送验证码的按钮,点击按钮后,按钮上显示倒计时共计10S,在此期间按钮禁用(disabled属性),10S后按钮可以重新点击.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        let btn = document.querySelector('button')
        let x = 10
        btn.addEventListener('click',function () 
           let time = setInterval(function()
                btn.disabled=true
                btn.innerText=x+'s'
                //console.log(x);
                if(x == 0)
                    clearInterval(time)
                    btn.disabled=false
                    btn.innerText='按钮'
                    x = 10
                
                x--
            ,1000)

        )
    </script>
</body>
</html>

6.在网页上设置一个点击按钮,点击后网页上生成随机颜色直径为100px的圆形.(提示:随机颜色的生成使用RGB颜色模式和math.random()方法封装的随机整数函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid ;
            
        
    </style>
</head>
<body>
    <div></div>
    <button>改色</button>
    <script>
        let divs = document.querySelector('div')
        let btn = document.querySelector('button')
        function randomInt(min,max)
        return Math.floor(Math.random()*(max-min+1)+min);
        
        console.log(divs);
        btn.addEventListener('click',function()
            let a =  randomInt(0,255)
            let b =  randomInt(0,255)
            let c =  randomInt(0,255)
            
            // console.log(a,b,c);
            divs.style.backgroundColor=`rgb($a,$b,$c)`
            // divs.style.backgroundColor='rgb('+a+','+b+','+c+')'
            
        )
    </script>
</body>
</html>

7.现在有一个王者荣耀比赛,需要录入参赛选手的信息,点击提交按钮后展示到一个表格中中,要求录入的信息如下:
姓名:2个字到4个字之间 年龄:18岁及以上 段位分数:大于或等于800分 手机号码:11位数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
            background-color:rgb(238, 237, 237);
            width: 300px;
            padding:25px;
            margin-bottom: 100px;
            margin-left: 100px;

        
        input 
            border: 2px solid #888;
            outline: none;
        

        table 
            color: white;
            border-color: blue;
            background-color: orange;
        

        button 
            width: 243px;
            height: 40px;
            background-color: rgb(0, 174, 255);
            
        
        h3
            text-align: center;
        
        p
            text-align: center;
        
    </style>

</head>
<body>
    <div>
        <h3>王者荣耀比赛信息登记表</h3>
        <p>姓名&emsp;&emsp;<input type="text" class="name"></p>
        <p>年龄&emsp;&emsp;<input type="text" class="age"></p>
        <p>段位分数:<input type="text" class="num"></p>
        <p>手机号码:<input type="text" class="tel"></p>
        <p><button class="btn">提交</button></p>
    </div>
    <table border="1" width="600" cellspacing="0" cellspacing="0" class="table">
        <thead>
            <td>姓名</td>
            <td>年龄</td>
            <td>段位分数</td>
            <td>手机号码</td>
        </thead>
    </table>
    <script>
        let name =document.querySelector('.name')
        let age =document.querySelector('.age')
        let num =document.querySelector('.num')
        let tel =document.querySelector('.tel')
        let btn =document.querySelector('.btn')
        let table =document.querySelector('.table')
        let flag1
        let flag2
        let flag3
        let flag4
        name.addEventListener('input',function()
            if(name.value.length>=2 && name.value.length<=4)
                name.style.borderColor='blue';
                flag1=true
            else
                name.style.borderColor='red';
                flag1=false
            
        )
        age.addEventListener('input',function()
            if(age.value>=18)
                age.style.borderColor='blue';
                flag2=true
            else
                age.style.borderColor='red';
                flag2=false
            
        )
        num.addEventListener('input',function()
            if(num.value>=800)
                num.style.borderColor='blue';
                flag3=true
            else
                num.style.borderColor='red';
                flag3=false
            
        )
        tel.addEventListener('input',function()
            if(tel.value.length ==11)
                tel.style.borderColor='blue';
                flag4=true
            else
                tel.style.borderColor='red';
                flag4=false
            
        )
        btn.addEventListener('click',function()
            if(flag1&&flag2&&flag3&&flag4)
                let table = document.querySelector("table")//获取表格
                let tr = document.createElement("tr")//创建元素
                tr.innerHTML = `<tr><td>$name.value</td><td>$age.value</td><td>$num.value</td><td>$tel.value</td></tr>`//元素内容
                table.appendChild(tr) //在表格中添加子元素
                name.value=''
                age.value=''
                num.value=''
                tel.value=''
            else
                alert('信息填入有误')
            
        )
    </script>

</body>
</html>

8.页面上有10个方框,方框里面分别显示1-10,点击按钮随机一个方框变成红色,其他方框颜色不变.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <t

以上是关于JS基础编程测试题的主要内容,如果未能解决你的问题,请参考以下文章

JS基础编程测试题

JS基础编程测试题

JS基础编程测试题

PAT基础级-钻石段位样卷1

PAT基础级-钻石段位样卷2-7-4 6翻了 (15 分)

PAT基础级-钻石段位样卷2-7-5 福到了 (15 分)