JavaWeb：（练习）四、JavaScript-文本、列表练习

最新推荐文章于 2024-07-16 18:23:56 发布

ReNola

最新推荐文章于 2024-07-16 18:23:56 发布

阅读量862

点赞数 1

分类专栏： JavaWeb练习文章标签： javascript css html 前端其他

本文链接：https://blog.csdn.net/qq_44125436/article/details/123010588

版权

JavaWeb练习专栏收录该内容

17 篇文章 6 订阅

订阅专栏

JavaWeb：（练习）四、JavaScript-文本、列表练习

JavaWeb：（练习）四、JavaScript-文本、列表练习

JavaWeb：（练习）四、JavaScript-文本、列表练习

一、文本练习

1、练习目标

选择下拉框,对文本域进行字体,颜色,大小设置

2、HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本编辑器</title>
		
		<link href="Demo.css" rel="stylesheet" type="text/css" />
		
		<script src="Demo.js" type="text/javascript"></script>
		
	</head>
	<body>
		<div class="main">
			<h1 class="head">文本编辑器</h1>
			<div class="main_box">
				<div class="box_head">
					<select id="color_id" class="box_color" onchange="changeColor()">
						<option>字体颜色</option>
						<option value="red">红色</option>
						<option value="blue">蓝色</option>
						<option value="green">绿色</option>
						<option value="yellow">黄色</option>
					</select>
					<select id="size_id" class="box_fontsize" onchange="changeFontSize()">
						<option>字体大小</option>
						<option value="5px">5px</option>
						<option value="15px">15px</option>
						<option value="25px">25px</option>
						<option value="35px">35px</option>
					</select>
					<select id="family_id" class="box_fontfamily" onchange="changeFontFamily()">
						<option>字体</option>
						<option value="宋体">宋体</option>
						<option value="楷体">楷体</option>
						<option value="黑体">黑体</option>
					</select>
					<div style="clear: left;"></div>
				</div>
				<div class="box_body">
					<textarea id="text" class="box_body_content">
《静夜思》
唐·李白
床前明月光
疑是地上霜
举头望明月
低头思故乡
					</textarea>
				</div>
			</div>
		</div>
	</body>
</html>

3、CSS代码

*{
	margin: 0px;
	padding: 0px;
}

.head{
	color: #5F9EA0;
	font-family: 楷体;
	text-align: center;
	padding-top: 100px;
}

.main_box{
	text-align: center;
}

.box_head{
	background-color: #DFE9F5;
	width: 500px;
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	
	margin: auto;
}

.box_body_content{
	width: 496px;
	height: 200px;
	border:#96B8EF 2px solid;
	
	font-family: 微软雅黑;
	font-size: 20px;
	text-align: center;
}

select{
	width: 100px;
	
	float: left;
	margin-left: 33px;
	margin-right: 33px;
}

4、js代码

function changeColor () {
	var textObj = document.getElementById("text");
	var colorOptions = document.getElementById("color_id");
	textObj.style.color = colorOptions.options[colorOptions.selectedIndex].value;
}

function changeFontSize () {
	var textObj = document.getElementById("text");
	var sizeOptions = document.getElementById("size_id");
	textObj.style.fontSize = sizeOptions.options[sizeOptions.selectedIndex].value;
}

function changeFontFamily () {
	var textObj = document.getElementById("text");
	var familyOptions = document.getElementById("family_id");
	textObj.style.fontFamily = familyOptions.options[familyOptions.selectedIndex].value;
}

5、网页结果

在这里插入图片描述

二、列表练习

1、练习目标

实现全选,全不选,反选功能

2、HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选，全部选，反选</title>
		
		<link href="Demo.css" rel="stylesheet" type="text/css" />
		
		<script src="Demo.js" type="text/javascript"></script>
		
	</head>
	<body>
		
		<div class="box_class">
			<div class="head_class">
				<input class="button_class" type="button" value="全选" onclick="choiceAll()" />
				<input class="button_class" type="button" value="全不选" onclick="choiceNull()" />
				<input class="button_class" type="button" value="反选" onclick="choiceReverse()" />
			</div>
			<form class="options_class">
				<div class="option_class">
					<input class="option_box_class" type="checkbox" name="people" />
					<span class="order_class">1</span>
					<span class="name_class">张一</span>
					<span class="number_class">10</span>
				</div>
				<div class="option_class">
					<input class="option_box_class" type="checkbox" name="people" />
					<span class="order_class">2</span>
					<span class="name_class">张二</span>
					<span class="number_class">20</span>
				</div>
				<div class="option_class">
					<input class="option_box_class" type="checkbox" name="people" />
					<span class="order_class">3</span>
					<span class="name_class">张三</span>
					<span class="number_class">30</span>
				</div>
				<div class="option_class">
					<input class="option_box_class" type="checkbox" name="people" />
					<span class="order_class">4</span>
					<span class="name_class">张四</span>
					<span class="number_class">40</span>
				</div>
			</form>
		</div>
		
	</body>
</html>

3、CSS代码

*{
	margin: 0;
	padding: 0;
}

.box_class{
	border: 2px grey solid;
	width: 300px;
	margin: auto;
	margin-top: 100px;
}

span{
	border: 1px black solid;
	margin-left: 1px;
}

.head_class{
	border: 1px black solid;
	width: 296px;
	margin: auto;
	margin-bottom: 3px;
}

.button_class{
	margin: 2px 5px 2px 2px;
}

.option_class{
	margin-top: 5px;
	margin-bottom: 5px;
}

.order_class{
	padding-right: 40px;
}

.option_box_class{
	border: 1px black solid;
	margin-left: 3px;
}

.name_class{
	padding-right: 120px;
}

.number_class{
	padding-right: 40px;
}

4、js代码

function choiceAll() {
	var optionObjs = document.getElementsByClassName("option_box_class");
	for(var i=0; i<optionObjs.length ;i++) {
		optionObjs[i].checked = true;
	}
}

function choiceNull() {
	var optionObjs = document.getElementsByClassName("option_box_class");
	for(var i=0; i<optionObjs.length ;i++) {
		optionObjs[i].checked = false;
	}
}

function choiceReverse() {
	var optionObjs = document.getElementsByClassName("option_box_class");
	for(var i=0; i<optionObjs.length ;i++) {
		if(optionObjs[i].checked == true) {
			optionObjs[i].checked = false;
		} else {
			optionObjs[i].checked = true;
		}
	}
}