WEB前端人机交互导论实验-实训9 JavaScript

最新推荐文章于 2024-01-17 09:35:11 发布

起床悠悠

最新推荐文章于 2024-01-17 09:35:11 发布

阅读量1.6k

点赞数 38

分类专栏：前端 JavaScript html 文章标签：前端人机交互 javascript

本文链接：https://blog.youkuaiyun.com/gyeolhada/article/details/135586054

版权

1.项目1 改变新闻网页中字号

A.题目要求：

设计如图1-9-2所示的界面，要求当网络访问者选择字号中的【大、中、小】时能实现页面字号大小变化，选择“中”时，页面效果如图1-9-3所示。

B.思路：

【1】CSS 样式：

body: 设置页面主体的样式，包括字体大小、居中显示、弹性布局等。

h1: 设置标题样式，包括字体、文本对齐和字体粗细。

#SizeSelector: 设置选择字号区域的样式，包括字体、字重和字体大小。

.SizeButton: 设置按钮的共同样式，包括字体大小、无边框、鼠标悬浮时的下划线效果等。

.SizeButton:hover 和 .SizeButton:active: 分别定义了按钮在悬浮和点击时的样式变化。

#Content：设置页面框中内容的显示，包括字体大小，边框宽度等等。

#inclind_content和#inclind_content p：设置页面框内的黄色款以及文段，包括行间距等等。

【2】JavaScript：

ChangeSize(fontSize): JavaScript 函数，根据传入的字体大小参数改变页面内容的字体大小。

使用 document.getElementById 获取页面元素。

通过 switch 语句根据传入的参数选择不同的字体大小。

【3】HTML 内容：

<h1>: 页面标题。

<div id="SizeSelector">: 包含字号选择按钮的区域。

<button>: 字号选择按钮，每个按钮有相应的 onclick 事件，点击时调用 ChangeSize 函数。

<div id="Content">: 包含页面内容的区域。

<div id="inclind_content">: 包含文字内容的区域。

<p>: 段落元素，包含一段关于 JavaScript 的描述。

C.总体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变新闻页面字号</title>
		<style type="text/css">
			/* 设置整体页面样式 */
			body{
				font-size: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 100vh;
				margin: 0;
			}
			/* 设置页面标题样式 */
			h1{
				text-align: center;
				font-family: 宋体;
				font-weight: 900;
			}
			/* 设置字号选择器区域样式 */
			#SizeSelector{
				margin-bottom: 0px;
				font-family: 宋体;
				font-weight: 580;
				font-size: 25px;
			}
			/* 设置字号选择按钮的样式 */
			.SizeButton{
				margin-right: 0px;
				font-size: 25px;
				cursor: pointer;
				border: none;
				color:blue;
				text-align: right;
				text-decoration: underline;
				background-color: transparent;
			}
			/* 设置按钮悬浮时的样式 */
			.SizeButton:hover{
				color: purple;
			}
			/* 设置按钮点击时的样式 */
			.SizeButton:active{
				color: purple;
			}
			/* 设置新闻内容区域的样式 */
			#Content{
				margin: 0px auto;
				background-color: darkgrey;
				font-size: 22px;
				text-indent: 2em;
				font-family: 宋体;
				font-weight: 600;
				width: 1000px;
				height: 250px;
				border: 2px solid black;
			}
			/* 设置包含内容的区域的样式 */
			#inclind_content{
				width: 1000px;
				height: 250px;
				border: 2px solid yellow;
			}
			/* 设置内容段落的样式 */
			#inclind_content p{
				padding: 15px;
				line-height: 2;
			}
		</style>
		<script>
			// JavaScript函数：根据传入的字体大小参数改变页面内容的字体大小
			function ChangeSize(fontSize){
				var Content = document.getElementById('Content');
				switch(fontSize){
					case 'small':
						Content.style.fontSize = '15px';
						break;
					case 'medium':
					    Content.style.fontSize = '20px';
						break;
					case 'large':
					    Content.style.fontSize = '25px';
						break;
					default:
					    break;
				}
			}
		</script>
	</head>
	<body>
		<!-- 页面标题 -->
		<h1>用JavaScript改变新闻网页中的字号</h1>
		<!-- 字号选择器区域 -->
		<div id="SizeSelector">
            选择字号【
			<!-- 小号按钮 -->
			<button class="SizeButton" onclick="ChangeSize('small')">小</button>
			<!-- 中号按钮 -->
			<button class="SizeButton" onclick="ChangeSize('medium')">中</button>
			<!-- 大号按钮 -->
			<button class="SizeButton" onclick="ChangeSize('large')">大</button>
			】
		</div>
		<!-- 新闻内容区域 -->
		<div id="Content">
			<!-- 包含内容的区域 -->
			<div id="inclind_content"&g

最低0.47元/天解锁文章