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>姓名  ：<input type="text" class="name"></p>
<p>年龄  ：<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以上是关于JS基础编程测试题的主要内容，如果未能解决你的问题，请参考以下文章