移动互联网开发应用操作题

最新推荐文章于 2024-08-18 21:08:41 发布

lfra

最新推荐文章于 2024-08-18 21:08:41 发布

阅读量138

点赞数 1

文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_42430408/article/details/118034390

版权

1.1 创建一个div标签，在里面添加专业列表内容，并适当的设置字体字号和背景颜色等样式。在页面上，添加一个文本框和一个命令按钮，编写按钮点击事件，实现如下功能：

当点击“添加”按钮时，能够将文本框中填入的专业添加到专业列表框中；

效果样图：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div {
				width: 400px;
				height: auto;
				background-color: #81848d;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<h3 style="text-align: center;">专业列表</h3>
			<ul id="ulist">
				<li class="child" id="child">计算机科学与技术</li>
				<li class="child" id="child">网络工程</li>
			</ul>
			<br>
			新增专业：
			<input type="text" id="subject">
			<button onclick="addList()">增加</button>
		</div>
		
		<script>
			function addList() {
				var subject = document.getElementById("subject");
				var add = subject.value;
				var child = document.getElementsByClassName("child")[1];
				var newChild = document.createElement("li");
				var newText = document.createTextNode(add);
				newChild.appendChild(newText);
				child.appendChild(newChild);
			}
		</script>
	</body>
</html>

效果图：

1.2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.div {
				width: 300px;
				height: auto;
				background-color: #ffb5b5;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="div" id="demo" style="font-size:25px;color:white;">
			<div style="font-size:30px; font-weight: bold;">工作准则</div>
			不迟到，不早退。
			<br>
			遵纪守法，严守秘密。
			<br>
			不得携带违禁物品。
		</div>
		<button id="btn">切换文字颜色</button>
		<script>
			var btn = document.getElementById("btn");
			var demo = document.getElementById("demo");
			btn.onclick = function() {
				if (demo.style.color == 'white') {
					demo.style.color = 'black';
				} else {
					demo.style.color = 'white';
				}
			}
		</script>
	</body>
</html>

效果图：

2. 创建一个关于植物信息介绍的手机App项目，按要求实现其中常见植物列表页面的功能：

2.1 页面布局

按照手机App页面的常规布局模式，对页面框架进行布局并美化。（页面上方显示标题，页面最下方显示相关的操作菜单）例如图1。

（注：背景颜色、文字样式、文字内容和图标可根据情况自行调整）

2.2 数据列表显示

综合运用HTML、CSS、jQuery、本地存储、MUI等相关技术，在布局页面中间实现常见植物列表数据的显示，并进行适当的页面美化。数据及图片可自行到网络查看下载。

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">常见植物</h1>
		</header>
		<div class="mui-content" style="margin-top: -20px;">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/flower/hehua.jpg">
						<div class="mui-media-body">
							荷花
							<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/flower/mudan.jpg">
						<div class="mui-media-body">
							月季
							<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="img/flower/yueji.jpg">
						<div class="mui-media-body">
							牡丹
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">常见植物</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">植物分类</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">关于我们</span>
			</a>
		</nav>
	</body>
</html>

lfra

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动互联网开发应用操作题

创建一个div标签，在里面添加专业列表内容，并适当的设置字体字号和背景颜色等样式。在页面上，添加一个文本框和一个命令按钮，编写按钮点击事件，实现如下功能：当点击“添加”按钮时，能够将文本框中填入的专业添加到专业列表框中；效果样图：...
复制链接

扫一扫