jQuery五星好评界面反馈界面

最新推荐文章于 2022-10-13 19:40:34 发布

张三顺

最新推荐文章于 2022-10-13 19:40:34 发布

阅读量1.4k

点赞数

分类专栏： # javascript 文章标签： jquery html js 五星好评遮罩层

本文链接：https://blog.csdn.net/starry7953810/article/details/75009706

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

星星：

jQuery五星好评界面反馈界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五星好评</title>
		<style type="text/css">
			.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
			*{list-style: none;padding: 0;margin: 0;}
			.box{margin: 0 auto;width: 450px;background: #fff;padding:20px;}
			.zz{width: 408px;display: block;line-height: 20px;float: left;}
			.qq{width: 13px;height: 13px;background: url(images/close.png);float: right;cursor: pointer;}
			#ul_1>li{margin-right: 8px;float: left;background-image: url(images/off_icon.png);width: 24px;height: 24px;}
			.xingxing{padding-top: 20px;}
			.gaijin{padding-top: 20px;}
			.gaijin>input{padding:10px 6px;border:1px #e1e1e1 solid;margin-right: 12px;background-color: #fff;margin-top: 10px;}
			textarea{margin-top: 16px;width: 430px;height: 72px;resize: none;padding: 8px;}
			.anniu>input{padding: 8px 34px;background: #dce0e5;border:0;}
			.anniu>input:nth-child(1){margin-right: 30px;}
			.anniu>input:hover{background: #329dd9;color: #fff;}
			.anniu{width: 240px;margin: 0 auto;padding-top: 20px;}
			input,li{cursor: pointer;outline: none;}
			.bg1{background:#fff url(images/pop_up_des_cur.png)no-repeat right bottom;border: 1px #fec659 solid !important;}
			.bg2{background-image:url(images/on_icon.png) !important;}
			.container{background: rgba(0,0,0,.5);position: fixed;bottom: 0;top: 0;left: 0;right:0;padding: 50px;display: none;}
			#c{width: 400px;height: 50px;line-height: 50px;font-size: 24px;margin:50px 400px ;}
			
		</style>
	</head>
	<body>
		<button id="c">点击获取十星好评界面</button>
		<div class="container">
			<div class="box">
				<p class="zz">感谢您的使用，您有多大可能性向您的亲友推荐10086网厅？请用1-10颗星表达您的观点，1颗代表完全不可能，10颗代表非常有可能！</p>
				<div class="qq"></div>
				<div style="clear: both;"></div>
				<div class="xingxing clearfix">
					<ul id="ul_1">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<p style="color:#fec959;"><span id="numb">0</span>颗星</p>
				</div>
				<!--星星结束了-->
				<div class="gaijin">
					<p>您觉得我们在哪方面需要改进？以便更好为您服务O(∩_∩)O~</p>
					<input type="button" value="客户登录便捷性"/>
					<input type="button" value="页面打开速度"/>
					<input type="button" value="查询、办理顺畅简洁程度"/>
					<input type="button" value="页面设计简洁美观程度"/>
					<input type="button" value="帮助信息有用性"/>
					<input type="button" value="其他"/>
				</div>
				<!--改进结束了-->
				<textarea value="输入您要反馈的内容" >输入您要反馈的内容</textarea>
				<p style="float: right;">您还可以输入<span id="q1">100</span>字</p>
				<div class="clearfix"></div>
				<div class="anniu">
					<input type="button" value="确定"/>
					<input type="button" value="取消"/>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#c').click(function(){
					$('.container').show(500);
				});
				
				$('.qq').click(function(){
					$('.container').hide(500);
				});
				
				

	/这个是五星好评的点击事件的代码
				//这是一个点击事件
				$('ul>li').click(function(){
					//先把加的class给清空了
					$('ul>li').removeClass('bg2 bg3');
					//给点击过的事件添加带有更换背景的bg2
					$(this).addClass('bg2 bg3').prevAll().addClass('bg2 bg3');
					//把点击过的几颗星传给id为#numb的标签
					$('#numb').html($(this).index()+1);
				})
				//这是一个hover事件
				$('ul>li').hover(function(){
					//鼠标在上面的时候添加bg2
					$(this).addClass('bg2 bg3').prevAll().addClass('bg2 bg3');
				},function(){
					//判断包不包括bg3，包括说明这个按钮点击过了
					if($('ul>li').attr("class")=='bg2 bg3'){
						//点击过了，那就在鼠标离开的时候删除大于你之前点击过的li点亮的星星
						$('ul>li:gt('+($('#numb').html()-1)+')').removeClass('bg2');
					}else{
						//如果没有点击过，那就删除鼠标放于上面的时候添加的bg2
					$('ul>li:lt('+($(this).index()+1)+')').removeClass('bg2');	
					}	
				})

	///这个是按钮点击添加边框和√号的函数
				$('div.gaijin input').click(function(){
					//使用切换功能更换bg1
					$(this).toggleClass("bg1");		
				})

	这个是一个判断输入框的内容可添加文字数量的代码
				$('textarea').focus(function(){
					//先把文本域中原来的value给清空掉
					if($('textarea').val()=="输入您要反馈的内容"){
						$('textarea').val("");
						//定义最大可输入的长度
						$('textarea').attr("maxlength","100");
					}
					function on1(){
						//定义一个on1() 这个方法用来持续更新剩余字数的值
						//剩余的值等于最大长度值减去已经写的字数
						var aaa=$('textarea').attr("maxlength")-($('textarea').val().length);
						//把这个值传到#q1标签中
						$('#q1').html(aaa);
					}
					//定时更新on1（）
					setInterval(on1,500);
				})//获得焦点的函数结束
				
///焦点离开的时候的判断	
				$('textarea').blur(function(){

					//如果为空，说明用户什么都没有填，然后就再把提示文字给添加进去
					//并且修改最大可输入文字长度
					if($('textarea').val()==""){	
						$('textarea').val("输入您要反馈的内容");
						$('textarea').attr("maxlength","109");
					}
				})//失去焦点的函数结束
			})//入口函数结束

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

我是starry.每天进步一点点。2017年7月13日09:07:08