2020-12-18

最新推荐文章于 2024-07-12 20:49:16 发布

Cheng0502

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量87

点赞数

分类专栏：网页设计文章标签： html

本文链接：https://blog.csdn.net/Cheng0502/article/details/111358108

版权

网页设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这次的考试题模板，发个博客经常看看在这里插入图片描述

<html	xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>  上机考试操</title>

</head>
<body> 
	<div>
		<iframe id="header" src="header.html" scrolling="no"  width="100%" height="700px"></iframe>
	</div>
		<div id="content">
	<center>	
		<p style="font-size:24px;">按照下面图示的表单各项，请在本图片下编写HTML代码实现这个表单效果。</p>
			<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
	<p style="font-size:40px;">我的表单</p>
	<img src="images/form.jpg"  />
<br>
<hr/>

 <form action="no" method="get">
 <div style="text-align: center; font-size: 36px">我的表单</div>
 //下面需要你自己填
 <form>
 账号:<input type="text" name="username"> </br>
 密码:<input type="password" name="userpassword">
 </form>
 <form>
 <div>爱好:<input type="checkbox" name="vehicle" value="Bike">体育
<input type="checkbox" name="vehicle" value="car">唱歌
<input type="checkbox" name="vehicle" value="1">阅读
<input type="checkbox" name="vehicle" value="c2">旅游</div>
 </form>
 <form>
 <div>性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="male">女
</div>
 </form>
 <form>
<div>自我介绍:
<textarea rows="10" cols="60">
这里是自我介绍。
</textarea>
</div>
 </form>
 <form><div>地址：
<select>
<option value="biejing">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">河北</option>
<option value="5">天津</option>
<option value="6">重庆</option>
<option value="7">河南</option>
</select>
</div>
 </form>
 <form>
<input type="button" name="tijiao" value="提交">
<input type="button" name="chongzhi" value="重置">
<input type="button" name="anniu" value="按钮">
 </form>
 //到这里为止
	<div style="margin:10px;">	
	<center>
     		<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
	</center>
	</div>		
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201218140633924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZW5nMDUwMg==,size_16,color_FFFFFF,t_70)

上机考试操JS部分

//此处编写JS代码实现题目要求
function qiu(){
var w=document.getElementById(“kuan”).value;
var l=document.getElementById(“chang”).value;
var h=document.getElementById(“gao”).value;
var w1=parseInt(w);
var l1=parseInt(l);
var h1=parseInt(h);
s=2*(l1w1+l1h1+w1h1);
v=w1l1*h1;
document.getElementById(“biaomianji”).innerHTML=s;
document.getElementById(“tiji”).innerHTML=v;
}//到这里为止

按照下面表单各项，请实现当输入长方体的长，宽，高时，在相应的元素中显示出长方体的表面积和体积

返回考试首页

我的JavaScript代码设计

		<br>
		<hr/>

		<p>长：<input id = "chang" type="text" name="chang" value="" size="10"/>
			<br><br>
			宽：<input type="text" id = "kuan" name="宽" value="" size="10"/>
			<br><br>
			高：<input type="text" name="高"  id = "gao" value="" size="10"/>
			<br />
			<br/>
			<input type="button" name="jisuan"  value="计算体积和表面积" onclick="qiu()"/>
			<br><br>
		</p>
		<p id="biaomianji"  class="xianshi" style="font-size:18px;" >此处显示表面积</p>
		<p id="tiji"  class="xianshi"  style="font-size:18px;">此处显示体积</p>


		<div style="margin:10px;">	
			<center>
				<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
			</center>
		</div>		
	</body>
	</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201218140743280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZW5nMDUwMg==,size_16,color_FFFFFF,t_70)

上机考试操JQuery部分

请设计代码实现：点击按钮时以下三个色块淡入淡出要求函数应用JQuery（注：相应的文件在js文件夹中）

返回考试首页

我的JQuery效果展示

//下面填答案 //到这里为止

点击按钮观察淡入淡出下面的色块。

<div style="margin:10px;">	
<center>
 		<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
</center>
</div>

```

Cheng0502

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-18

这次的考试题模板，发个博客经常看看<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 上机考试操</title></head><body> <div> <iframe id="
复制链接

扫一扫