前端练习题

已于 2022-11-18 19:28:01 修改
阅读量1.1k 收藏 17
点赞数 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>
无限博弈之编程
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
40个前端新手入门练习项目，学完即可做项目
wenzhou1113的博客
07-12 4146
2022最新前端练手项目+适合零基础
前端习题
qq_40102768的博客
08-02 390
一.简答 1.html 中 title 属性和 alt 属性的区别? title:规定有关元素的额外信息 alt:alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的 2.请说出几个常用的块级元素和行内元素. 行内元素：与其他行内元素并排...
前端练习题前端练习题前端练习题周考.docx
07-01
前端练习题
20 个前端练手项目合集
热门推荐
m0_65135687的博客
02-28 2万+
最近有很多小伙伴反应 —— “ 刚学前端，学完了 HTML、CSS、JS 三大件就没事干了，有没有适合刚入门小白的练手项目呀？” 今天就给大家带来 20 个适合新手的前端练手项目，由浅入深、层层递进，内容也非常有趣（以游戏为主），具体项目如下： 如果你还没有前端基础，推荐从这 3 门课开始学起 —— 基础阶段： 1. HTML5 简明教程 课程将从网站的基础概念开始，带你了解其运行机制。然后，我们会学习 HTML 基础知识，了解各种常用标签的意义以及基本用法。此外，课程还会涉及 HTML5
史上最全的web前端面试题汇总及答案
最新发布
2301_78416672的博客
04-22 669
官方”的解释：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等语言中都能找到对闭包不同程度的支持。通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
50个前端入门练手项目，助你掌握前端基础知识
m0_65135687的博客
02-28 5143
1.Expanding Cards 效果如图所示: 1.png 源码[1] 在线示例[2] [ ] 知识点总结: CSS:弹性盒子布局中的flex属性:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。 JavaScript:利用[].filter.call()方法可快速实现简单的选项卡切换。如上述示例源码: constpanelItems=document.querySelectorAll(".container>.pane...
前端练习题整理（2）
小岛的每一段verse的博客
08-25 760
阅读目录1.2. 1. css注释：// （部分浏览器不兼容） /**/ 单行/多行注释 html注释：<!-- --> js注释：// /**/ jsp注释：<%--注释内容--%> 2.
前端基础练习题
lobo_seeworld的博客
11-27 3890
前端基础练习题
前端练习题 代码敲烂月薪过万前端练习题 代码敲烂月薪过万.docx
07-01
前端练习题 本资源摘要信息中，我们将对前端练习题进行总结，并列出相关的知识点。 ajax 跨域解决方案 前端解决方案中，jsonp 是使用标签的 src 属性链接资源接口，在 url 中传递回调函数，实现跨域请求。 同步和...
前端练习题 代码敲烂月薪过万.docx
07-01
"前端练习题 代码敲烂月薪过万" 本资源是一份前端练习题，涵盖了多个知识点，包括事件委托、ES6、新特性、JavaScript运行环境、事件处理、JavaScript数据类型、运算符优先级等。 1. 事件委托：事件委托是指将事件...
前端考试习题
DoIdo
12-11 1854
随堂测验 1. 简述Web的工作原理 正确答案： 1.用户通过客户端浏览器访问Internet上网站或者其他网络资源时，通过在浏览器输入网站或者网页的（统一资源定位符）网址，或者通过超链接方式链接到另外的网页或者资源； 2.通过域名服务器进行全球域名解析，并根据解析结果访问指定IP的网站或网页； 3.获取网站IP地址后，客户端浏览器向指定IP地址的Web服务器发送一个HTTP（hypertext transfer protocol, 超文本传输协议）请求； 4.Web服务器响应客户端请求，将用户所需的HT
前端---练习
weixin_44546735的博客
01-18 382
《华为官网前端制作（作业练习）》 作者：熊琪 本次测试完成时间：2018年12月26日-2018年12月30日 完成模块功能：华为页面展示。 一、 效果实现 页面展示主要包括图片的轮播，鼠标事件。 页面展示：见图1，测试的主页面。 （ 图1，页面全屏展示） 二、 演示功能 点击导航部分实现页面跳转，点击图中导航部分的 Select Region按钮出现详细选项雾罩层 导航部分如图2： 点击按钮...
从零开始学WEB前端——JavaScript基础介绍
su_zui的博客
02-24 1158
JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
前端基础练习题目
qq_56918166的博客
09-26 68
前端基础练习题目。
网站建设 之 前端练习题
HeroIsUseless的博客
02-26 923
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
一些前端学习过程的自测练习题
xhc6666的博客
01-13 538
一些前端学习过程的自测练习题
【面试题】20个常见的前端算法题，你全都会吗？
web全栈开发的博客
04-18 4305
现在面试中，算法出现的频率越来越高了，大厂基本必考今天给大家带来20个常见的前端算法题，重要的地方已添加注释，如有不正确的地方，欢迎多多指正💕。
前端常见编程题（一）
a15387091481的博客
04-23 3061
1. 前言 主要汇总一些目前遇见过的跟前端有关的编程题（面试用），不是算法编程题。 有遗漏的和写错了的，欢迎评论区指正分享。 防抖与节流 防抖 用户触发事件过于频繁，只执行最后一次事件的操作。 实现：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后在200ms内没有再次触发滚动事件，那么就执行函数；如果在200ms内再次触发了滚动事件，那么当前的计时取消，重新开始计时。 window.onload = function() { window.document.querySel
前端面试常见编程题汇总
廖龙东个人博客
04-07 795
使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。使用定时器：当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。实现 add(1)(2)(3)(4)(5).sum()和 add(1)(2, 3)(4)(5).sum()参数不定的累加效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值