jQuery五星好评界面反馈界面

来源：互联网发布：java 数据类型赋值编辑：程序博客网时间：2024/04/28 22:53
星星：
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
阅读全文
0 0