信息反馈页

最新推荐文章于 2022-08-09 09:40:18 发布

简生

最新推荐文章于 2022-08-09 09:40:18 发布

阅读量3.8k

点赞数

分类专栏： JavaScript 文章标签： class border input function microsoft 手机

本文链接：https://blog.csdn.net/jiancm2001/article/details/7704124

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.加了类新浪微博的闪烁提醒；

2.正则判断内容是否空格；

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,ul,li{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,textarea,button{font:99%arial,helvetica,clean,sans-serif;}.container{margin:0 auto;}#footer{padding:12px 0 10px 0;text-align:center;border-top:1px solid #ccc;}.content{display:inline-block;}.left-bar{float:left;padding:0 5px 0 0;}.right-bar{float:left;}.clr{clear:both;}

.note { color:#f00; }

.feedback { border:1px solid #d7d7d7; }
.feedback h2 { border-bottom:1px solid #d6d8d7; background:#eee; height:31px; font-size:14px; }
.feedback h2 span { display:block; background:#4b88d8; width:160px; height:31px; line-height:31px; color:#fff; text-align:center; }
.feedback .fbCont { padding:5px 0 0 0; }

.fbCont h3 {  text-align:left; font-weight:normal; width:100%; height:21px; overflow:hidden; }
.fbCont div { padding:15px 0 0 0; margin:0 40px; }
.fbCont span { display:inline-block; height:20px; line-height:20px; text-align:center;}
.fbCont .hidden { display:none;}
.fbCont .tit { border:1px solid #d7d7d7; border-bottom:0px solid #fff; background:#f3f3f3;  }
.fbCont .url .tit { width:71px; }
.fbCont .report .tit { width:131px; }
.fbCont .contact .tit { width:94px; }
.fbCont .url input, .fbCont .report textarea, .fbCont .contact input { line-height:28px; border:1px solid #7e9db9; font-size:14px; padding:0 8px; color:#333;  }
.fbCont .url input { width:885px; height:28px; }
.fbCont .report textarea { width:885px; resize:none; }
.fbCont .contact input { width:227px; height:28px; }
.fbCont .submit { text-align:center; height:58px; padding:20px 0 0 0; background:#f8f8f8; margin:20px 0 0 0; }
.fbCont .submit input { width:158px; height:38px; border:1px solid #9fbedd; background:#fff; color:#0054ac; font-size:18px; font-family:"Microsoft YaHei"; cursor:pointer; }
.fbCont .submit .hover { border:1px solid #3972c3; background:#4b88d8; color:#fff; }
.fbCont .contact .grey { color:#bcbcbc; }
</style>

</head>
<body>
<div class="feedback">
	<h2><span>意见反馈与错误报告</span></h2>
	<div class="fbCont">
		<form action="" method="get" id="Jform">
			<div class="url">
				<h3><span class="tit">页面地址</span></h3>
				<input type="text" value="" name="t1" />
			</div>
			<div class="report">
				<h3>
					<span class="tit"><i class="note">*</i>问题描述或意见反馈</span>
					<span id="Jnote1" class="hidden">< 请填写正确内容和问题表述</span>
				</h3>
				<textarea name="t2" rows="6" id="Jreport"></textarea>
			</div>
			<div class="contact">
				<h3 class="w94">
					<span class="tit"><i class="note">*</i>您的联系方式</span>
					<span id="Jnote2" class="hidden">< 请填写联系方式，方便我们与您取得联系</span>
				</h3>
				<input type="text" value="邮箱、QQ或手机" name="t3" class="grey" id="Jcontact" />
			</div>
			<div class="submit">
				<input type="button" id="Jsubmit" value="提 交" />
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
var domContact = document.getElementById("Jcontact"),
	domSubmit = document.getElementById("Jsubmit"),
	domReport = document.getElementById("Jreport"),
	domNote1 = document.getElementById("Jnote1"),
	domNote2 = document.getElementById("Jnote2"),
	domForm = document.getElementById("Jform"),
	redArr = ["f55", "f66", "f77", "f88", "f99", "faa", "fbb", "fcc", "fdd", "fee", "fff" ],
	index = [0, 0],  //
	electId = [];
function colorEffect(elem, num) {
	if(index[num] < 11) {
		var i = index[num];
		elem.style.backgroundColor = "#" + redArr[index[num]];
		index[num]++;
	} else {
		elem.style.backgroundColor = "#fff";
		index[num] = 0;
		window.clearInterval(electId[num]);
	}
};
function checkInput() {
	var repVal = domReport.value,
		contVal = domContact.value;
	if(	repVal === "" || /^\s*\s$/.test(repVal) || 
		contVal === "" || contVal === "邮箱、QQ或手机" || /^\s*\s$/.test(contVal) ) {
		if(repVal === "" || /^\s*\s$/.test(repVal)) {
			domNote1.className = "note";
			window.clearInterval(electId[0]);
			electId[0] = window.setInterval("colorEffect(domReport, 0)", 30);
		} else {
			domNote1.className = "hidden";
		}
		if(contVal === "" || contVal === "邮箱、QQ或手机" || /^\s*\s$/.test(contVal)) {
			domNote2.className = "note";
			window.clearInterval(electId[1]);
			electId[1] = window.setInterval("colorEffect(domContact, 1)", 30);
		} else {
			domNote2.className = "hidden";
		}
	} else {
		domNote1.className = "hidden";
		domNote2.className = "hidden";
		domForm.submit();
	}
};
domSubmit.onclick = checkInput;
domSubmit.onmousedown = function() {
	this.className = 'hover';
};
domSubmit.onmouseup = function() {
	this.className = '';
};
domContact.onfocus = function() {
	if(this.value === "邮箱、QQ或手机") {
		this.value = "";
		this.className = "";
	}
};
domContact.onblur = function() {
	if(this.value === "") {
		this.value = "邮箱、QQ或手机";
		this.className = "grey";
	}
};

</script>
</body>
</html>

Demo： http://jsfiddle.net/pwGaB/1/embedded/result/

简生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息反馈页

1.加了类新浪微博的闪烁提醒；2.正则判断内容是否空格；body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,ul,li{margin:0;padding:0;}table{border-collapse:collapse;bor
复制链接

扫一扫