0
点赞
收藏
分享

微信扫一扫

web第四次上级作业


先看图吧

web第四次上级作业_Email

代码: 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>By CaesarChang张旭</title>
<style>
#top {
position: relative;
width: 800px;
}

#logo {
float: left;
width: 120px;
}

#nav {
position: absolute;
top: 40px;
left: 80px;
}

#nav li {
list-style: none;
font-size: 13px;
float: left;
margin-left: 19px;
}

#nav li a {
text-decoration: none;
color: black;
}

#top2 {
width: 800px;
position: relative;
}

#banner {
position: absolute;
top: 100px;
left: 0px;
width: 800px;
}

#top3 {
position: relative;
}

#text1 {
position: absolute;
left: 0px;
top: 300px;
}

#text2 {
position: absolute;
top: 300px;
left: 250px;
font-size: 25px;
font-weight: bold;
}

#text3 {
position: absolute;
left: 470px;
top: 307px;
text-decoration: none;
color: coral;
}

#top4 {
position: relative;
border: 1px solid gainsboro;
top: 329px;
width: 200px;
height: 200px;
}

#top5 {
position: relative;
border: 1px solid gray;
top: 250px;
height: 130px;
}

#son1 {
position: absolute;
}

#son1_text {
color: orange;
font-size: 13px;
margin-top: 169px;
height: 35px;
overflow: hidden;
}

#son2 {
position: absolute;
top: 210px;
left: 0px;
}

#son3 {
position: absolute;
top: 11px;
left: 9px;
}

#son4 {
position: absolute;
top: 88px;
left: 28px;
}

#son5 {
position: absolute;
top: 410px;
}

#son6 {
position: absolute;
left: 256px;
top: 10px;
}

#son7 {
position: absolute;
left: 257px;
top: 88px;
}

#son8 {
position: absolute;
height: 20px;
background-color: black;
top: 690px;
width: 800px;
}

#son9 {
background-color: gray;
position: absolute;
height: 50px;
top: 710px;
width: 780px;
padding: 10px;
}

#son10 {
position: absolute;
height: 70px;
top: 470px;
width: 500px;
left: 256px;
padding: 10px;
border: 1px solid black;
appearance: none;
display: hidden;
}
</style>
<script>
function product() {

var product = document.getElementById("product").value;
if (product.length < 1) {
alert("请填写产品名称");
}
}

function number() {

var number = document.getElementById("number").value;
if (number.length < 1) {
alert("请填写数量");
}
}

function company() {

var company = document.getElementById("company").value;
if (company.length < 1) {
alert("请填写公司");
}
}

function contect() {

var product = document.getElementById("contect").value;
if (product.length < 1) {
alert("请填写联系人");
}
}

function phone() {

var phone = document.getElementById("phone").value;
if (phone.length < 1) {
alert("请填写手机号码");
}
}

function chuanzhen() {

var chuanzhen = document.getElementById("chuanzhen").value;
if (chuanzhen.length < 1) {
alert("请填写传真");
}
}

function Email() {

var pattern = /^\w{0,}@{1}\w{0,}.{1}\w{0,}$/;
var e = document.getElementById("email").value;
if (pattern.test(e)) {


} else if (!pattern.test(e)) {
alert("请填写有效的邮箱!");

}

}

function ok() {
var arr = ["亲爱的客户,您订购产品为"];
var all = document.getElementsByName("username");
arr.push(all[0].value + ",订购数量为");
arr.push(all[1].value + ".您公司");
arr.push(all[2].value + "联系人");
arr.push(all[3].value + "的电话为");
arr.push(all[4].value + ",邮箱");
arr.push(all[5].value + ",感谢您的订购");
var son10 = document.getElementById("son10");
son10.innerText = arr;
son10.style.cssText = "visibility: visible;";

// alert(arr);
}
</script>
</head>

<body>
<div id="top">
<img id="logo" src="./实验四材料/images/maintop001.gif">
<ul id="nav">
<li><a href="#">首页 </a>|</li>
<li><a href="#">公司简介</a>|</li>
<li><a href="#">新闻中心</a>|</li>
<li><a href="#">产品展示</a>|</li>
<li><a href="#">新品推荐</a>|</li>
<li><a href="#">合作伙伴</a>|</li>
<li><a href="#">网上订单</a>|</li>
<li><a href="#">人才招聘</a>|</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div id="top2">
<img id="banner" src="./实验四材料/images/main_banner_r3_c1.jpg">
</div>
<div id="top3">
<span id="text1">最新公告</span>
<span id="text2">ONLINE ORDERS</span>
<a id="text3" href="#">网上订单</a>

</div>
<div id="top4">
<div id="son1">
<div id="son1_text">本公司将一如即往,服务好新老客户,为客户提供最优价产品,欢迎联系我们! 热线:0755-83155222 传真:0755-83155366 电邮:dulonglp@vip.163.com QQ:59223322 228238633</div>
</div>
<div id="son2">友情链接</div>
<div id="top5">
<div id="son3"><img src="实验四材料/images/link002.gif"></div>
<div id="son4">
<select onchange="window.location=this.value;">
<option value="#">
--友情链接--
</option>
<option value="https://www.baidu.com/">
百度
</option>

</select>
</div>
</div>

<div id="son5">
<img src="实验四材料/images/newp001.jpg">
</div>
<div id="son6">
<img src="./实验四材料/images/newp006.jpg">
</div>
<div id="son7">
<table align="left">
<tr>
<td colspan="2">订购产品:<input type="text" name="username" id="product" onblur="product()" /></td>

</tr>
<tr>
<td colspan="2">订购数量:<input type="text" name="username" id="number" onblur=" number()" /></td>

</tr>
<tr>
<td colspan="2">订购公司: <input type="text" name="username" id="company" onblur=" company()" />
</td>
</tr>
<tr>
<td colspan="2">联系人:<input type="text" name="username" id="contect" onblur=" contect()" /></td>

</tr>
<tr>
<td colspan="2">联系电话:<input type="text" name="username" id="phone" onblur=" phone()" /></td>

</tr>
<tr>
<td colspan="2">联系传真:<input type="text" name="username" id="chuanzhen" onblur=" chuanzhen()" /></td>

</tr>
<tr>
<td colspan="2">Email: <input type="text" name="username" id="email" onblur=" Email()" /></td>

</tr>
<tr>
<td colspan="2">备注:<textarea cols="39" rows="6"></textarea></td>


</tr>

<tr class="but" style="margin-left:40px;">
<td colspan="2">
<button onclick="ok()">提交订单</button>
<input type="reset" name="reset" value="重写" />
</td>
</tr>
</table>

</div>
<div id="son8"></div>
<div id="son9">
<font style="font-size: 8px;">版权所有:深圳市都龙实业发展有限公司 网站备案编号: <span style="color: orange;"> 粤ICP备05054648号</span> 服务热线:0755-83155222 传真:0755-83155366 E-mail:dulonglp@vip.163.com

</font>
</div>
<div id="son10" style="visibility:hidden;">

</div>
</div>
</body>

</html>

举报

相关推荐

第四次作业

MySQL第四次作业

java第四次作业

第四次Java作业

第四次作业20220327

Linux第四次作业

第四次作业(java)

0 条评论