利用js简单实现页面

最新推荐文章于 2022-06-17 10:05:13 发布

牧野风凉

最新推荐文章于 2022-06-17 10:05:13 发布

阅读量1.2k

点赞数 2

分类专栏： Web实例文章标签： js

本文链接：https://blog.csdn.net/weixin_45602982/article/details/100635914

版权

Web实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.实现如下效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1-7</title>
	</head>
	<style>
		#box{
			width: 400px;
			height: 400px;
		}
	</style>
	<script type = "text/javascript">
			var box = document.getElementById("box");
			function red(){
				document.getElementById("box").style.background = "red";
			}
			function blue(){
				document.getElementById("box").style.background = "blue";
			}
			function yellow(){
				document.getElementById("box").style.background = "yellow";
			}
			function gray(){
				document.getElementById("box").style.background = "gray";
			}
			function green(){
				document.getElementById("box").style.background = "green";
			}
			function small(){
				document.getElementById("box").style.fontSize = "12px";
			}
			function middle(){
				document.getElementById("box").style.fontSize = "24px";
			}
			function big(){
				document.getElementById("box").style.fontSize = "48px";
			}
			function change(){
				var width = parseInt(document.getElementById("width").value);
				var height = parseInt(document.getElementById("height").value);
				document.getElementById("box").style.width = width + "px";
				document.getElementById("box").style.height = height + "px";
			}
			function hide(){
				document.getElementById("bt").value = (document.getElementById("bt").value == '隐藏')?'显示':'隐藏';
				document.getElementById("box").style.display = (document.getElementById("box").style.display == 'none')?'block':'none';
			}
		
		</script>
	<body>
		<p>单击改变背景颜色:
			<span onclick= "red()" style = "background-color: red">&nbsp;&nbsp;&nbsp;</span>&nbsp;
			<span onclick= "blue()" style="background-color: blue">&nbsp;&nbsp;&nbsp;</span>&nbsp;
			<span onclick= "yellow()" style="background-color: yellow">&nbsp;&nbsp;&nbsp;</span>&nbsp;
			<span onclick= "gray()" style="background-color: gray">&nbsp;&nbsp;&nbsp;</span>&nbsp;
			<span onclick= "green()" style="background-color: green">&nbsp;&nbsp;&nbsp;</span>&nbsp;
			</p>
		<p>单击改变字体大小：
			<span onclick="small()">小</span>
			<span onclick="middle()">中</span>
			<span onclick="big()">大</span>
		</p>
		<p>
			高：<input type = "text" id = "height">
			宽：<input type = "text" id = "width">
			<input type = "button" onclick="change()" value = "改变窗口大小">
		</p>
		<p><input type = "button" id = "bt" onclick="hide()" value = "隐藏"></p>
		<div id = "box">
		<p>计算机工程学院</p>
		</div>
	</body>
</html>

牧野风凉

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
利用js简单实现页面

1.实现如下效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>1-7</title> </head> <style> #box{ width: 400px; height: 400px; }...
复制链接

扫一扫