JavaScript考试

最新推荐文章于 2024-05-15 19:04:55 发布

番茄炒蛋哩

最新推荐文章于 2024-05-15 19:04:55 发布

阅读量871

点赞数

文章标签： javascript java 开发语言

本文链接：https://blog.csdn.net/m0_56528620/article/details/125658960

版权

1、要求：新建数组，元素有香蕉，苹果，雪梨，葡萄，哈密瓜，橙子，通过for 循环遍历数组，输出。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数组遍历</title>
</head>

<body>
	<script>
	var arr=['香蕉','苹果','雪梨','葡萄','哈密瓜','橙子'];
	for(var i=0;i<6;i++){
		console.log(arr[i]);
		document.write(arr[i]);
	}
	</script>
</body>
</html>

2、要求：弹框，要求输入5门成绩，求总分，平均分、最高分，最低分。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>求分数</title>
</head>
<body>
	<p>要求输入8门成绩，求总分，平均分、最高分，最低分</p>
	<script type="text/javascript">
		var arr=new Array(83,85,98,89,99,88,78,90);
		var sum=0;
		var max=0;
		var min=100;
		for(var i=0;i<arr.length;i++){
			sum+=arr[i];
			if(arr[i]>max){
				max=arr[i];
			}
			if(arr[i]<min){
				min=arr[i];
			}
			console.log(sum);
		}
		var avg=sum/arr.length;
		document.write(arr.length+'门成绩分别是：'+arr+'<br>');
		document.write('总分是：'+sum+'<br>');
		document.write('平均分是：'+avg+'<br>');
		document.write('最高分是：'+max+'<br>');
		document.write('最低分是：'+min+'<br>');
	</script>
	<img src="答案图片/求分数.png" style="width: 800px; height: auto;"/><br>
</body>
</html>

3、要求：利用函数冒泡排序，假定数组为[23，11，37，76，3，99]，利用函数冒泡排序从大到小对数组进行排序。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡排序</title>
</head>

<body>
	<p>利用函数冒泡排序，假定数组为[13，11，37，76，3，99]，利用函数冒泡排序从小到大对数组进行排序</p>
	<script>
		var arr=[13,11,37,76,3,99];
		for(var i=0;i<=arr.length-1;i++){//索引
			for(var j=0;j<=arr.length-i-1;j++){
				if(arr[j]>arr[j+1]){//按从小到大，< 就会从大拍到小
					var temp=arr[j];
					arr[j]=arr[j+1];
					arr[j+1]=temp;
				}
			}
		}	
		console.log(arr);
		document.write(arr);
	</script><br>
	<img src="答案图片/冒泡排序.png" style="width: 800px; height: auto">
</body>
</html>

4、要求：用户输入一个年份，通过函数来判断输入的年份是闰年还是平年。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>判断是否是闰年</title>
</head>

<body>
	<script>
		var n=parseInt(prompt("请输入一个年份："));
		if(isNaN(n)){
			alert('请输入正确的年份');
		}else{
			alert(year(n));
		}
		function year(n){
			if(n%4==0&& n%100!=0||n%400==0){
				return n+"年闰年";
			}else{
				return n+"年平年";
			}
		}
	</script>
</body>
</html>

5、要求：利用构造函数创建对象，要求创建一个名为 Star 的构造函数，里面包含若干属性和方法（自定义），然后通过调用构造函数创建不少于2个对象，并输出对象的相关属性和方法。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>构造函数创建对象</title>
</head>

<body>
	<script>
		function Star(uname,age,sex){
			this.name=uname;
			this.age=age;
			this.sex=sex;
			this.sing=function(sang){
				console.log(sang);
			}
		}
		var xmn=new Star('xmn',18,'girl');
		console.log(typeof xmn);
		console.log(xmn.name);
		console.log(xmn.age);
		console.log(xmn['sex']);
		xmn.sing('不会唱歌');
		
	</script>
</body>
</html>

6、要求：程序随机生成一个1-10之间的数字，并让用户输入一个数字，如果大于该数字，提示数字大了，请继续；如果小于该数字，提示数字小了，请继续；如果等于该数字，提示猜对了，结束程序。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随机生成一个1-10之间的数字</title>
</head>

<body>
	<script>
		function Random(min,max){
			return Math.floor(Math.random()*(max-min+1))+min;
		}
		var random=Random(1,10);
		while(true){
			var num=prompt("输入一个1-10之间的数字：");
			if(num>random){
				alert("数字大了");
			}else if(num<random){
				alert("数字小了");
			}else{
				alert("回答正确！");
				break;
			}
		}
	</script>
</body>
</html>

7、要求：给出一个数组对象[‘JS前端开发’，’前途无量’，’大家加油’]，利用 for.....in 循环,用程序在页面中分别输出数组对象的属性。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> for.....in 循环</title>
</head>

<body>
	<script>
		var x;
		var books=new Array();
		books[0]="JS前端开发";
		books[1]="前途无量";
		books[2]="大家加油";
		for (x in books){
			document.write(books[x]+'<br>');
		}
	</script>
</body>
</html>

8、要求：统计浏览页面的时间。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>统计浏览页面时间</title>
	<style type="text/css">
		body{
			background: #f2f2f2;
		}
		p.hr{
			width: 200px;
			border-top: 1px solid red;
		}
	</style>
</head>
<body onload="Timetrack()">
	<center>
		<h2>浏览所需时间</h2>
		<p class="hr"></p><br>
	</center>
	<script>
		var entered=new Date();
		function Timetrack(){
			var now=new Date();
			var seconds=Math.floor((now.getTime()-entered.getTime()) / 1000);
			var minutes=Math.floor(seconds/60);
			var second=seconds % 60;
			var minute=minutes % 60;
			document.form.timer.value=minute+":"+second;
			var timeID=setTimeout("Timetrack()",1000);
		}
	</script>
	<form name="form">
		<center>
		您已经花费了<input type="text" name="timer" size="6" value="0:00">秒。
		</center>
	</form>
</body>
</html>

9、要求：替换页面元素，利用DOM可以完成对HTML文档内所有元素的获取、访问。把原文档中父元素div（我是第一行内容，我是第二行内容，我是第三行内容，我是第四行内容）的第二个子元素替换成新添加的div元素（JavaScript课程）把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>替换页面元素</title>
</head>

<body>
	<div id="Odiv">
		<div id="p1">我是第一行内容</div>
		<div id="p2">我是第二行内容</div>
		<div id="p3">我是第三行内容</div>
		<div id="p4">我是第四行内容</div>
	</div>
	<input type="button" value="将第二行内容替换为Javascript课程"  onClick="replaceNode()">
	<script type="text/javascript">
		function replaceNode(){
			var parNode=document.getElementById("Odiv");
			var secondP=document.getElementById("p2");
			var newDiv=document.createElement("div");
			var newText=document.createTextNode("JavaScript课程");
			newDiv.appendChild(newText);
			parNode.replaceChild(newDiv,secondP);
		}
	</script>
</body>
</html>

10、结合jQuery库，实现单行文字上下滚动的效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单行文字滚动jq</title>
</head>

<body>
<div class="demopage">
<h2>jquery文字上下-单行滚动</h2>
<div class="scrollDiv" id="s1">
	<ul>
	<li><a href="javascript:;">jquery滤动条</a></li>
	<li><a href="javascript:;">jquery图片切换</a></li>
	<li><a href="javascript:;">jquery提示插件</a></li>
	<li><a href="javascript:;">jquery弹出层插件</a></li>
	<li><a href="javascript:;">jquery表单美化</a></li>
	<li><a href="javascript:;">jquery HTM5幻t灯打片</a></li>
	<li><a href="javascript:;">jquery图片放大战</a></li>
	<li><a href="javascript:;">jquery图片幻灯片</a></li>
	</ul>
</div>
</div>
	<script type="text/javascript" src="jquery-3.6.0.js">
</script>
	<script type="text/javascript">
		function SutoScroll(){
			$(obj).find("ul:first").animate({
				marginTop:"-25px"
			},500,function(){
				$(this).css({marginTop:"0px"}).find("li:first").append(this);
			});
		}
		$(document).ready(function(){
			setInterval('AutoScroll("#s1")',3000);
		})
	</script>
</body>
</html>

11、要求：在页面中有一张原始图片，鼠标移入的时候显示另一张图片，鼠标移出的时候又显示原始的那张图片（两张图片可随机选择）。把编写的程序截图在下框的左边，运行结果截图在下框的右边，下框可根据实际需要调整大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入移出效果</title>
</head>

<body>
	<img id="img1" name="image" src="答案图片/求分数.png" onMouseOver="mouseover()" onMouseOut="mouseout()" alt=""/>
	<script type="text/javascript">
		var OImg=document.getElementById("img1");
		function mouseover(){
			OImg.src="答案图片/冒泡排序.png";
		}
		function mouseout(){
			OImg.src="答案图片/求分数.png"
		}
	</script>
</body>
</html>

12、利用 for 循环打印8行8列星星

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印八行八列星星</title>
</head>

<body>
	<script>
		var str='';
		for(var i=1;i<=8;i++){
			for(var j=1;j<=8;j++){
				str=str+'😗';
			}
			str=str+'\n';
		}
		console.log(str);
	</script>
</body>
</html>

13、显示当前电脑的时、分、秒，要求时、分、秒为个位数时自动补0，类似 19:08:06的效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示时分秒并补0</title>
</head>

<body>
	<script type="text/javascript">
		function getTime(){
			var time=new Date();
			var h=time.getHours();
			h=h<10? '0'+h :h;
			var m=time.getMinutes();
			m=m<10? '0'+m:m;
			var s=time.getSeconds();
			s=s<10? '0'+s:s;
			return h+':'+m+':'+s;
		}
		console.log(getTime());
	</script>
</body>
</html>

14、显示当前电脑的年、月、日、星期，格式如：今天是：2022年6月15日星期三【注意星期是大写的一、二、三等等】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示年月日星期</title>
</head>

<body>
	<script type="text/javascript">
		var date=new Date();
		var year=date.getFullYear();
		var month=date.getMonth()+1;
		var dates=date.getDate();
		var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
		var day=date.getDay();
		console.log('今天是：'+year+'年'+month+'月'+dates+'日'+arr[day]);
	</script>
</body>
</html>

15、利用for循环，输出“这是我吃的第i 个苹果”，其中，第6个跳过不输出，共15个苹果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>continue关键字</title>
</head>

<body>
	<script>
		for(var i=1;i<=15;i++){
			if(i==6){
				console.log('这是我吃的第'+i+'个苹果');
				continue;
			}
		}
	</script>
</body>
</html>

16、创建随机点名程序，名字为班级1-20号的同学姓名

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>随机点名系统</title>
</head>

<body>
	<div id="name"></div>
	
	<script>
		var names=Array('name1','name2','name3','name4','name5','name6','name7','name8','name9','name10','name11','name12','name13','name14','name15','name16','name17','name18','name19','name20');
		var index=Math.ceil(Math.random()*20)-1;
		document.getElementById("name").innerHTML="这个人是"+names[index];
	</script>
</body>
</html>

17、打印金字塔，层数可以自定义

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印金字塔</title>
</head>

<body>
	<script>
		var level=prompt("请设置金字塔的层数");
		level=parseFloat(level)&&Number(level);
		if(isNaN(level)){
			alert("金字塔的层数必须是纯数字");
			}
		for(var i=1;i<=level;++i){
			var blank=level-i;
			for(var k=0;k<blank;++k){
				document.write('&nbsp;');
			}
			var star=i*2-1;
			for(var j=0;j<star;++j){
				document.write('*');
			}
			document.write('<br>')
		}
		
		
	</script>
</body>
</html>

18、设置一个计时器，具备开始计数和停止计数两个按钮，并能实现相应功能。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电子时钟走停</title>
	<style>
 div{
   height:50px;
   line-height:50px;
   text-align:center;
   border:double #ccc;
   width:100px;
 }
</style>
</head>
<body>	
<div id="clock"></div><p><button id="btn">暂停/开始</button></p >
<script>
    window.onload = startTime;
    var timer = null;
    function startTime()
    {
        var now = new Date();  // 获取当前的时间的毫秒数
        var h = now.getHours();  // 获取now的小时 (0 ~ 23)
        var m = now.getMinutes(); // 获取now的分钟 (0 ~ 59)
        var s = now.getSeconds(); // 获取now的秒数 (0 ~ 59)
        // 利用两位数字表示 分钟 和 秒数
        m = m < 10 ? '0'+ m : m;
        s = s < 10 ? '0'+ s : s;
        document.getElementById('clock').innerHTML = h + ":" + m + ":" + s
        timer = setTimeout('startTime()', 500);
    }
    // 通过按钮控制时钟暂停或开始
    document.getElementById('btn').onclick = function(){
        if(timer){
            clearTimeout(timer);
            timer = null;
        }else{
            startTime();
        }
    }
</script>
</body>
</html>

19、完成“猴子选大王”程序，假设猴子总数为108个，提出第5个猴子，最后输出猴王的编号。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>猴子选大王</title>
</head>

<body>
	<script>
		var total=prompt('请输入猴子的总数');
		var kick=prompt("踢出第几只猴子");
		var monkey=[];
		for(var i=1;i<=total;++i){
			monkey.push(i);
		}
		i=0;
		while(monkey.length>1){
			++i;
			head=monkey.shift();
			if(i%kick!=0){
				monkey.push(head);
			}
		}
		console.log('猴王编号：'+monkey[0]);
	</script>
</body>
</html>

20、认识jQuery,实现单击图片时，为图片添加边框效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS为图片添加边框</title>
	<style>
		body{text-align: center;}
	</style>
</head>

<body>
	<img src="答案图片/冒泡排序.png">
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<script>
		$(document).ready(function(){
			$("img").click(function(){
				$('img').css('border','4px solid #FF0000');
			})
		})
	</script>
</body>
</html>