前端练习题

已于 2022-11-18 19:28:01 修改
阅读量1.3k 收藏 18
点赞数 3
分类专栏： 前端习题 文章标签： 前端 javascript html
于 2022-09-18 17:34:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54241717/article/details/126920362
版权

文章目录

1.完成注册表单（参考图片,使用表格布局css修饰即可）

在这里插入图片描述
代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册表单</title>
		
		<style type="text/css">
				
			form,table{
				width: 500px;
				margin: auto;
			}
			
			.one,.three,.four{
				text-align: center;
			}
			
			.one,.three{
				height: 25px;
				background-color: #1E90FF;
			}
			
			
			.zero{
				width: 500px;
				background-color: skyblue;
			}
			
			.explain{
				width: 150px;
				text-align: right;
			}
			
		</style>
		
	</head>
	<body>
		<form class="zero">
			<table>
				<tr >
					<td colspan="2" class="one"><h2 class="one">欢迎注册</h2></td>
				</tr>
				<div class="two">
					<tr>
						<td class="explain">用户名：</td>
						<td class="content">
							<input type="text" />
						</td>
					</tr>
					<tr>
						<td class="explain">密码：</td>
						<td>
							<input type="password" />
						</td>
					</tr>
					<tr>
						<td class="explain">性别：</td>
						<td>
							<input type="radio" name="gender" value="男" checked="checked"/>男
							<input type="radio" name="gender" value="女" />女
						</td>
					</tr>
					<tr>
						<td class="explain">电话：</td>
						<td>
							<input type="text" />
						</td>
					</tr>
					<tr>
						<td class="explain">职业：</td>
						<td>
							<select >
								<option value="" >请选择</option>
								<option value="程序猿" >程序猿</option>
								<option value="工程狮" >工程狮</option>
							</select>
						</td>
					</tr>
					<tr>
					<td class="explain">爱好：</td>
						<td>
							<input type="checkbox" name="hobby" />敲代码
							<input type="checkbox" name="hobby" />打游戏
							<input type="checkbox" name="hobby" />唱歌
							<input type="checkbox" name="hobby" />运动
						</td>
					</tr>
					<tr>
						<td class="explain">地址：</td>
							<td>
								<textarea cols="30" rows="3"></textarea>
							</td>
					</tr>
				</div>
				<tr>
					<td colspan="2" class="three">填写完成后点击下面提交按钮提交表单</td>
				</tr>
				<tr>
					<td colspan="2" class="four">
						<input type="submit" class="button" />
						<input type="reset"  class="button" />
					</td>
				</tr>
			</table>
		
		</form>

	</body>
</html>

2.有一个按钮,和一个div如图,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推.

在这里插入图片描述
在这里插入图片描述
代码演示

<!-- 方法一 -->
<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function oper(btnobj){
				
				var divobj=document.getElementById("div1");
				if(btnobj.value=="隐藏"){
			/* 
					 通过display样式可以修改标签的类型。
					 block：设置标签为块标签
					 none ：隐藏标签（标签将在页面中完全消失）
					 */
					divobj.style.display="none";
					btnobj.value="显示";
				}else{
					divobj.style.display="block";
					btnobj.value="隐藏";
				}
			}
		</script>
	</head>
	<body>
	
		<!--
		有一个按钮,和一个div如图,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推. 
		 -->
		 <input type="button" value="隐藏"  onclick="oper(this)" >
		 <div id="div1" style="width: 200px;height: 200px; background-color: blue;">
			 
		 </div>
	</body>
</html>

<!-- 方法二 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show(){
				var btnobj=document.getElementById("btn1");
				var divobj=document.getElementById("div1");
				if(btnobj.value=="隐藏"){
					divobj.style.display="none";
					btnobj.value="显示";
				}else{
					divobj.style.display="block";
					this.value="隐藏";
				}
			}
		

		</script>
	</head>
	<body>
	<!-- 
	有一个按钮,和一个div如图,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推. 
	 -->
	<input type="button" value="隐藏" onclick="show()" id="btn1">
	<div id="div1" style="width: 200px; height: 200px; background-color: aqua;">
		
	</div>
	</body>
</html>

3.完成下图(界面仅供参考)

选择下拉框,对文本域进行字体,颜色,大小设置
在这里插入图片描述
代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				border: 0px;
			}
			.box{
				width: 400px;
				margin: 0 auto;
			}
			.title{
				width: 350px;
				text-align: center;
				color: #5F9EA0;
			
			}
			.head{
				width: 350px;
				background-color: #DFE9F5;
			}
			.head_left,
			.head_mid,
			.head_right{
				float: left;
				margin: 0 8px;
				 
			}
		     .head_left_left,
			 .head_left_mid,
			 .head_left_right{
				 border: 1px black solid;
				 width: 100px;
				 position: relative;
				 border-radius:5px 5px 0px 0px;
				
			 }
		    
			.bottom_textarea{
				border: 1px skyblue solid;
				background-color: #FFFFCC;
			}
		</style>
		<script type="text/javascript">
			function changecolor(colorOptions){
				var textObj=document.getElementById("text");
				textObj.style.color=colorOptions.options[colorOptions.selectedIndex].value;
			}
			function changesize(sizeOptions){
				var textObj=document.getElementById("text");
				textObj.style.fontSize=sizeOptions.options[sizeOptions.selectedIndex].value;
			}
			function changefamily(familyOptions){
				var textObj=document.getElementById("text");
				textObj.style.fontFamily=familyOptions.options[familyOptions.selectedIndex].value;
			}
		</script>
	</head>
	<body>
		<!-- 
		 选择下拉框,对文本域进行字体,颜色,大小设置
		 -->
		 <div class="box">
			 <div class="title">
				 <h1>文本编辑器</h1>
			 </div>
		 <div class="head">
			 <div class="head_left">
				 <!-- 
				 onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序
				 -->
				 <select class="head_left_left"  onchange="changecolor(this)">
					 <option>字体颜色</option>
					 <!-- color：字体颜色 -->
					 <option value="red" id="ired">红色</option>
					 <option value="blue" id="iblue">蓝色</option>
				 </select>
			 </div>
			 <div class="head_mid">
				 <select class="head_left_mid"  onchange="changesize(this)">
					 <!-- font-size：字体大小-->
					 <option>字体大小</option>
					 <option value="20px" id="i20">20px</option>
					 <option value="40px" id="i40">40px</option>
				 </select>
			 </div>
			 <div class="head_right">
				 <select class="head_left_right" onchange="changefamily(this)">
					 <!-- font-family：字体-->
					 <option>字体</option>
					 <option value="楷体" id="i楷体">楷体</option>
					 <option value="serif" id="iserif">serif</option>	
				 </select>
			 </div>
			 <div style="clear: left;"></div>
		 </div>
		 <div class="bottom">
	    <textarea class="bottom_textarea" cols="50" rows="15" id="text"></textarea>
	    </div>
	</div>
	</body>
</html>

4.完成简单的计算器

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				border: 0px;
			}
			.box{
				width: 370px;
				height: 250px;
				background-color: lightgray;
				border-right: 0px;
				position: absolute;
				left: 35%;
			}
			.ONE,
			.TWO,
			.three,
			.four{
				float:left;
				position: relative;
				left: 35px;
				width: 300px;
				text-align: center;
				border-right: 0px;
			}
			#text{
			    
				width: 290px;
				height: 40px;
				background-color: azure;
				font-size: 30px;
				margin: 2px auto;
				border: 2px black solid;
				
				
			}
			.ONE input,
			.TWO input,
			.three input,
			.four input{
				width: 70px;
				height: 40px;
				margin: 5px auto;
				border-right: 3px grey solid;
			}
			
		</style>
		<script type="text/javascript">
			function clickNum(num){
				//数字
			var textobj=document.getElementById("text");
			textobj.innerHTML=textobj.innerHTML+num;
			}
			function clickop(op){
				var textobj=document.getElementById("text");
				textobj.innerHTML+=op;
			}
			function equa(){
				/* eval(arg) 可运算某个字符串。 */
				var textobj=document.getElementById("text");
				var expression=textobj.innerHTML;
				textobj.innerHTML=eval(expression);
			}
			function back(){
				/* 清空 */
				document.getElementById("text").innerHTML="";
			}
		</script>
	</head>
	<body class="on1">
		<div class="box">
			<div id="text">
				
			</div>
			 
			<div class="ONE">
				<input type="button" value="7" onclick="clickNum(7)">
				<input type="button" value="8"  onclick="clickNum(8)">
				<input type="button" value="9" onclick="clickNum(9)">
				<input type="button" value="+" onclick="clickop('+')">
			</div>
			<div class="TWO">
				<input type="button" value="4" onclick="clickNum(4)">
				<input type="button" value="5" onclick="clickNum(5)">
				<input type="button" value="6" onclick="clickNum(6)">
				<input type="button" value="-" onclick="clickop('-')">
			</div>
			<div class="three">
			<input type="button" value="1" onclick="clickNum(1)">
			<input type="button" value="2" onclick="clickNum(2)">
			<input type="button" value="3" onclick="clickNum(3)">
			<input type="button" value="*" onclick="clickop('*')">
			</div>
			<div class="four">
				<input type="button" value="0" onclick="cliknum(0)">
				<input type="button" value="c" onclick="back()">
				<input type="button" value="=" onclick="equa()">
				<input type="button" value="/" onclick="clickop('/')">
			</div>
		</div>
	</body>
</html>

5.制作一个计数器 如图，点击开始从1开始计数，点击停止，停止计数，点击复位归0并结束计数。

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时器</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				border-radius:50%;
				background-color: antiquewhite;
				border: 5px black solid;
			}
			#screen{
				background-color: aqua;
				font-size: 20px;
				color: blue;
				width: 70px;
				height: 30px;
				position: relative;
				top: 30px;
				left: 80px;
				padding: 5px 10px 5px 60px;
			}
			#start_id,#stop_id,#reset_id{
				width: 50px;
				height: 40px;
				float: left;
				position: relative;
				top:50px;
				left: 10px;
				border-radius: 50%;
				margin: 20px 20px;
			}
		</style>
		<script type="text/javascript">	
			var t;
			function add(){
				var screenObj=document.getElementById("screen");
				var Number=parseInt(screenObj.value)+1;
				screenObj.value=""+Number;
			}
			function start(){
				/*
				 setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				 setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				 */
				t=setInterval("add()",100);
			}
			function stop(){
				clearInterval(t);
				/* console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。 */
				console.log("停止了一次");
			}
			function reset(){
				document.getElementById("screen").value="1";
			}	
		</script>
	</head>
	<body>
			<div class="box">
			    <input type="text" value="1" readonly="readonly" id="screen" /><br>
				<input type="button" value="开始" id="start_id" onclick="start()">
				<input type="button" value="停止" id="stop_id"  onclick="stop()">
				<input type="button" value="复位" id="reset_id" onclick="reset()">
			</div>	
	</body>
</html>

6.在网页中显示一个电子表,格式为年月日 时分秒的时间,使其每秒更新一次.

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				width: 400px;
				height: 100px;
				background-color: black;
				margin:auto;
				margin-top: 100px;
				
			}
			.clock{
				text-align: center;
				color: white;
				font-size: 30px;
				padding-top: 20px;
				
			}
		</style>
		<script type="text/javascript">
			var t=setInterval("test()",100);
			function test(){
				var date=new Date();
				var timeObj=document.getElementsByClassName("time_id");
				timeObj[0].innerHTML=date.getFullYear()+"年";
				timeObj[1].innerHTML=date.getMonth()+1+"月";
				timeObj[2].innerHTML=date.getDate()+"日";
				timeObj[3].innerHTML=date.getHours()+":";
				timeObj[4].innerHTML=date.getMinutes()+":";
				timeObj[5].innerHTML=date.getSeconds();
				
			}
		</script>
	</head>
	<body>
		<div class="box">
			<div class="clock">
			<!-- 	getElementById 是通过id来获取元素，id在HTML中是唯一的，所以获取到的只有一个元素。
				
				getElementsByTagNam 是通过标签名来获取元素，一种标签在HTML中可以有多个，所以获取到的是多个元素，且返回是以集合的形式返回。
				
				getElementsByClassName 是通过类名来获取元素，同名的类在HTML中也能存在多个，所以获取到的也是多个元素，同样是以集合的形式反回。 -->
			
				<span class="time_id"></span>
				<span class="time_id"></span>
				<span class="time_id"></span>
				<span class="time_id"></span>
				<span class="time_id"></span>
				<span class="time_id"></span>
			</div>
		</div>
	</body>
</html>
无限博弈之编程
关注
专栏目录
前端页面练习：学成在线首页
11-12
个人练习的一个静态页面，只有HTML和CSS，内容和逻辑较为简单，素材来源于黑马的pink老师，算是自己跟着做好的第一个项目
学习前端的练习页面
05-22
学习前端的练习页面，自己无聊的时候写的想，新人入门可以看看多练习操作啊。很有必要努力学习，找到好工作。主要的功能我也忘记了，可以下载以后自己看，不要差评
从零开始学WEB前端——HTML实战练习
最新发布
2401_87029603的博客
09-10 886
作为一个合格的程序员，熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。VSCode：插件众多，拓展性强；适用于绝大部分前端开发Sublime Text：界面简洁，轻量级启动快速。HBuilder：国产前端开发工具，非常不错的软件，在开发微信小程序和手机APP上非常好用。WebStorm：jetbrains公司旗下的JavaScript开发工具，适合在前端工程化的项目中使用。Dreamweaver：曾经以PS+DW+FW称霸网页领域，号称网页三剑客。
前端练习题整理（2）
小岛的每一段verse的博客
08-25 1572
阅读目录1.2. 1. css注释：// （部分浏览器不兼容） /**/ 单行/多行注释 html注释：<!-- --> js注释：// /**/ jsp注释：<%--注释内容--%> 2.
网站建设 之 前端练习题
HeroIsUseless的博客
02-26 1151
HTML JS CSS @supports (display: flex) { div { display: flex; }} @supports not (display: flex) { div { float: right; }} 注释：如果浏览器支持display:flex属性的话，那么div的样式就是display:flex，如果浏览器不支持display:flex属性的话，那么div的样式就是display:right @supports (display: flex) and ( box-sh
前端-HTML练习题
weixin_30709061的博客
10-20 2008
本小节重点： 熟练使用div+span布局，知道div和span的语义化的意思 熟悉对div、ul、li、span、a、img、table、form、input标签有深刻的认知，初期也了解他们，知道他们在浏览器上的初始化样式是怎样的。 熟练网站布局结构 比如 header区域，侧边栏区域，内容区域，脚部区域 查询一下对div和span标签的理解 如何理解标签的嵌套结构？它们的规则是怎样的？...
前端练习题整理（1）
小岛的每一段verse的博客
08-23 2241
阅读目录1.2.3.4.5.6.7.![在这里插入图片描述](https://img-blog.csdnimg.cn/63d24f9873bc4d9fa3b93e2019e6130b.png)8.9.10.11.12.13.14. 1. <ul><li>1fsadfsafa<li>2fsafasfafafdaf</ul> 浏览器把关闭的工作给做了，所以在创建列表时，li 标记符的结束标记符可省略。 2. <hr size="10px"/>
前端练习题前端练习题前端练习题周考.docx
07-01
前端开发基本知识点总结 本文总结了前端开发中的基本知识点，涵盖了事件对象、JavaScript 语言基础、HTML 事件、日期对象、正则表达式、字符串拼接等方面的知识点。 事件对象中，offsetLeft 属性是元素针对 ...
前端练习题 代码敲烂月薪过万前端练习题 代码敲烂月薪过万.docx
07-01
前端练习题 本资源摘要信息中，我们将对前端练习题进行总结，并列出相关的知识点。 ajax 跨域解决方案 前端解决方案中，jsonp 是使用标签的 src 属性链接资源接口，在 url 中传递回调函数，实现跨域请求。 同步和...
前端练习题 代码敲烂月薪过万.docx
07-01
"前端练习题 代码敲烂月薪过万" 本资源是一份前端练习题，涵盖了多个知识点，包括事件委托、ES6、新特性、JavaScript运行环境、事件处理、JavaScript数据类型、运算符优先级等。 1. 事件委托：事件委托是指将事件...
前端习题
qq_40102768的博客
08-02 419
一.简答 1.html 中 title 属性和 alt 属性的区别? title:规定有关元素的额外信息 alt:alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的 2.请说出几个常用的块级元素和行内元素. 行内元素：与其他行内元素并排...
前端练习实例，js+jq+css+html
12-30
适合新手练习前端整体，实现各种页面动态功能
前端项目练习01-瀑布流练习
weixin_34192993的博客
11-13 168
是我是我又是我，我要在此发誓每个工作日练一个前端小项目，并把大致思路和部分代码以及总结心得发在这里，请诸位监督，鞠躬感谢O(∩_∩)O谢谢 瀑布流设计主要是计算最小块的高度并自动填充。设计思路如下： 原生js设计： 1）分块，整体页面为一个分块，设为main.main中分成若干个cage,cage中再加入photo块，photo块中再放入图片。 ...
前端基础练习题
qq_28223305的博客
12-13 454
1.     Js里面操作属性的方式有哪些？分别有什么特点？ . 可以操作JS中承认的属性。不能获取行间的自定义属性。 可以添加属性，但是行间看不到。 [] 可以操作变量。不能获取行间自定义属性。 可以添加属性，但是行间看不到。 getAttrbute-setAttrbute-removeAttrbute 可以获取、设置、移除行间的自定义属性。 2 window.onloa
前端考试习题
DoIdo
12-11 1943
随堂测验 1. 简述Web的工作原理 正确答案： 1.用户通过客户端浏览器访问Internet上网站或者其他网络资源时，通过在浏览器输入网站或者网页的（统一资源定位符）网址，或者通过超链接方式链接到另外的网页或者资源； 2.通过域名服务器进行全球域名解析，并根据解析结果访问指定IP的网站或网页； 3.获取网站IP地址后，客户端浏览器向指定IP地址的Web服务器发送一个HTTP（hypertext transfer protocol, 超文本传输协议）请求； 4.Web服务器响应客户端请求，将用户所需的HT
Web前端—入门篇—练习题
SeanYBLL的博客
08-02 6127
一、简答题 html 中 title 属性和 alt 属性的区别? 【1】Alt属性 1、Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。 2、使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就...
几道web前端练习题目
weixin_33743248的博客
12-18 196
在 HTML 语言中，以下哪个属性不是通用属性？A]&lt;class&gt;B]&lt;title&gt;C]&lt;href&gt;D]&lt;style&gt; 在线练习：http://hovertree.com/tiku/bjaf/qi1g37nf.htm   在 CSS 样式定义中，以下哪种 RGB 颜色值是 Web 安全色？A]#111111B]#222222C]#333333D...
前端部分基础习题
热门推荐
GZHGK的博客
11-19 7万+
一.HTML 1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 !DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。 标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值