jQuery五星好评界面反馈界面

忘是亡心i 2022-06-12 01:43 220阅读 0赞

![Center][]

星星：![Center 1][]![Center 2][]![Center 3][]

## 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

[Center]: /images/20220612/1d72c6fa9f984c22a99135c2c34957c4.png
[Center 1]: https://img-blog.csdn.net/20170713090520364?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnJ5Nzk1MzgxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20170713090540067?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnJ5Nzk1MzgxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20220612/118f1756d13846b78e1bcef60df64b63.png