日常评分系统

最新推荐文章于 2024-08-15 15:20:23 发布

heavenly129324

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量674

点赞数 3

分类专栏：大学记录篇文章标签： css html javascript django

本文链接：https://blog.csdn.net/heavenly129324/article/details/121796123

版权

大学记录篇专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="container">
		<h1>评分系统</h1>
		<form>
			<table>
				<tr>
					<td><label>二哈：</label></td>
					<td><input type="text" name="二哈"/></td>
				</tr>
				<tr>
					<td><label>布偶：</label></td>
					<td><input type="text" name="布偶"/></td>
				</tr>
				<tr>
					<td><label>李婷：</label></td>
					<td><input type="text" name="李婷"/></td>
				</tr>
				<tr>
					<td><label>橙橙：</label></td>
					<td><input type="text" name="橙橙"/></td>
				</tr>
				<tr>
					<td><label>笨笨熊：</label></td>
					<td><input type="text" name="笨笨熊"/></td>
				</tr>
				<tr>
					<td><label>媛媛：</label></td>
					<td><input type="text" name="媛媛"/></td>
				</tr>
				<tr>
					<td><label>丫丫：</label></td>
					<td><input type="text" name="丫丫"/></td>
				</tr>
				<tr>
					<td><label>洋洋：</label></td>
					<td><input type="text" name="洋洋"/></td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="button" onclick="createScore(8)">随机产生分数</button>
						<button type="button" onclick="caleSore(8)">评分</button>
						<button type="reset" onclick="reSet()">重置</button>
					</td>
				</tr>
			</table>
			
		</form>
		<div>
			<div>最高分评委：<span id="maxScore"></span></div>
			<div>最低分评委：<span id="minScore"></span></div>
			<div>最后得分：<span id="score"></span></div>
		</div>
		</div>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

css代码

body{
	margin: 0;
	padding: 0;
}
.container{
	width: 500px;
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 1.875rem;
}
.container>h1{
	text-align: center;
}

js代码

//1.随机产生分数
var myinput=document.getElementsByTagName("input");
var maxScore=document.getElementById("maxScore");
var minScore=document.getElementById("minScore");
var myScore=document.getElementById("score");
function createScore(n){
	for(var i=0;i<n;i++){
		//myinput[i].value=Math.round(Math.random()*10).toFixed(2);
		myinput[i].value=Number((Math.random()*10).toFixed(2));
	}
}
//2.评分
function caleSore(){
	for(var j=0;j<myinput.length;j++){
		if(myinput[j].value!=""){
			var mymax=0,con=0,mymin=10,mincon=0,res=0;
			for(var i=0;i<myinput.length;i++){
				//最高分
				if(mymax>myinput[i].value){
					mymax=mymax;
				}else{
					mymax=myinput[i].value;
					con=myinput[i].name;
				}
				//最低分
				if(mymin>myinput[i].value){
					mymin=myinput[i].value;
					mincon=myinput[i].name;
				}else{
					mymin=mymin;
				}
				res+=Number(myinput[i].value);
				console.log(res);
			}
			maxScore.innerText=con;
			minScore.innerText=mincon;
			myScore.innerText=((res-mymax-mymin)/(myinput.length-2)).toFixed(2);
		}
	}
	
}
function reSet(){
	maxScore.innerText="";
	minScore.innerText="";
	myScore.innerText="";
}

最终效果

heavenly129324

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日常评分系统

HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container"> <
复制链接

扫一扫