评价页面html,利用html与css制作5星好评页面
@font-face {
font-family: 'iconfont'; /* project id 247957 */
src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot');
src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.woff') format('woff'),
url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.ttf') format('truetype'),
url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
body{
font-family: "microsoft yahei";
}
ul,li{
list-style: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.order-evaluation {
width: 827px;
border: 2px solid #E84E40;
background: #fff;
z-index: 200;
margin:50px auto;
}
.order-evaluation{
padding:22px;
}
.order-evaluation h4{
font-size:18px;
color:#333333;
padding-bottom:20px;
border-bottom:1px dashed #dbdbdb;
}
.order-evaluation p{
font-size:14px;
color:#999;
line-height:45px;
margin-bottom:0;
}
.order-evaluation .order-evaluation-text{
font-size:16px;
color:#333;
line-height:40px;
width:809px;
padding-left:15px;
background:#f3f3f3;
margin-bottom:25px;
margin-top:20px;
}
.order-evaluation-checkbox ul li{
width:142px;
height:43px;
border:1px solid #e8e8e8;
text-align: center;
background: #fff;
font-size:14px;
color:#333333;
line-height:43px;
margin-right:25px;
margin-bottom:25px;
float:left;
cursor: pointer;
overflow: hidden;
position:relative;
}
.order-evaluation-checkbox ul li.checked i{
display: block;
}
.order-evaluation-checkbox ul li.checked{
border:1px solid #e84c3d;
}
.order-evaluation .order-evaluation-textarea{
position:relative;
width: 784px;
height: 210px;
}
.order-evaluation .order-evaluation-textarea textarea{
width:793px;
height:178px;
border:1px solid #e8e8e8;
position:absolute;
top:0;
left:0;
line-height:22px;
padding:15px;
color:#666;
}
.order-evaluation .order-evaluation-textarea span{
position:absolute;
bottom:10px;
font-size:12px;
color:#999;
right:10px;
}
.order-evaluation .order-evaluation-textarea span em{
color:#e84c3d;
}
.order-evaluation>a{
width:154px;
height:48px;
border-radius: 6px;
display: block;
text-align: center;
line-height:48px;
background:#f36a5a;
float:right;
margin-top:20px;
color:#fff;
font-size:14px;
}
.order-evaluation-checkbox ul li i {
display: none;
color: #e84c3d;
position: absolute;
right: -4px;
bottom: -14px;
font-size: 20px;
}
.order-evaluation>a:hover{
background: #e84c3d;
}
.block li label,.con span{ font-size: 18px; margin-right: 20px; line-height: 23px;}
.block li span{display: inline-block; vertical-align: middle; cursor: pointer;}
.block li span img{margin-right: -5px; }
.level{color:#e84c3d;font-size:16px;margin-left:15px;position: relative;top: 3px;}
.dmlei_tishi_info{
height:70px;border-radius: 10px;background: rgba(0,0,0,0.5);font-size:18px;color:#fff;text-align: center;line-height: 70px;position:fixed;
left: 48%;
display: none;
margin-left: -128px;
top: 40%;
margin-top: -35px;
padding: 0 15px;
z-index: 1000;
}
给“新闻订单”的评价
请严肃认真对待此次评价哦!您的评价对我们真的真的非常重要!
本次交易,乖,摸摸头 给您留下了什么印象呢?
- 专业水平高
- 交付准时
- 效果明显
- 数据分析准确
- 能力待提高
- 工期延误
还可以输入140个字
评价完成
/*
*根据index获取str
* **/
function byIndexLeve(index){
var str ="";
switch (index)
{
case 0:
str="差评";
break;
case 1:
str="较差";
break;
case 2:
str="中等";
break;
case 3:
str="一般";
break;
case 4:
str="好评";
break;
}
return str;
}
//星星数量
var stars = [
['x2.png', 'x1.png', 'x1.png', 'x1.png', 'x1.png'],
['x2.png', 'x2.png', 'x1.png', 'x1.png', 'x1.png'],
['x2.png', 'x2.png', 'x2.png', 'x1.png', 'x1.png'],
['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x1.png'],
['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x2.png'],
];
$(".block li").find("img").hover(function(e) {
var obj = $(this);
var index = obj.index();
if(index < (parseInt($(".block li").attr("data-default-index")) -1)){
return ;
}
var li = obj.closest("li");
var star_area_index = li.index();
for (var i = 0; i < 5; i++) {
li.find("img").eq(i).attr("src", "http://7xnlea.com2.z0.glb.qiniucdn.com/" + stars[index][i]);//切换每个星星
}
$(".level").html(byIndexLeve(index));
}, function() {
})
$(".block li").hover(function(e) {
}, function() {
var index = $(this).attr("data-default-index");//点击后的索引
index = parseInt(index);
console.log("index",index);
$(".level").html(byIndexLeve(index-1));
console.log(byIndexLeve(index-1));
$(".order-evaluation ul li:eq(0)").find("img").attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png");
for (var i=0;i
$(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x2.png");
}
})
$(".block li").find("img").click(function() {
var obj = $(this);
var li = obj.closest("li");
var star_area_index = li.index();
var index1 = obj.index();
li.attr("data-default-index", (parseInt(index1)+1));
var index = $(".block li").attr("data-default-index");//点击后的索引
index = parseInt(index);
console.log("index",index);
$(".level").html(byIndexLeve(index-1));
console.log(byIndexLeve(index-1));
$(".order-evaluation ul li:eq(0)").find("img").attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png");
for (var i=0;i
$(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x2.png");
}
});
//印象
$(".order-evaluation-check").click(function(){
if($(this).hasClass('checked')){
//当前为选中状态,需要取消
$(this).removeClass('checked');
}else{
//当前未选中,需要增加选中
$(this).addClass('checked');
}
});
//评价字数限制
function words_deal()
{
var curLength=$("#TextArea1").val().length;
if(curLength>140)
{
var num=$("#TextArea1").val().substr(0,140);
$("#TextArea1").val(num);
alert("超过字数限制,多出的字将被截断!" );
}
else
{
$("#textCount").text(140-$("#TextArea1").val().length);
}
}
$("#order_evaluation").click(function(){
$("#order_evaluate_modal").html("感谢您的评价!么么哒(* ̄3)(ε ̄*)").show().delay(3000).hide(500);
})
评价页面html,利用html与css制作5星好评页面相关推荐
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面 这是效果图 这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
- HTML+CSS制作知乎登录页面
HTML+CSS制作知乎登录页面 由于没有用上js相关的技术,所以无法做出相应的功能,,只能做出知乎登录页面的用密码登录的界面,不能切换到免密码登录.相关界面的图片如下: 网页上的原图: 我做的: ...
- html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果 互联网 发布时间:2008-10-17 19:25:02 作者:佚名 我要评论 英文原文:Sliding Photograph Galleries ...
- login.php静态页面的设计,ps+div+css打造蓝色后台--login页面设计
ps+p+css打造蓝色后台 做到兼容主流浏览器 如何设计一个页面? 如何切片才能更好的配合实现? 如何考虑兼容性? 如何用p+css做后台的百分比布局? Login页面设计 先在photoshop中 ...
- 【前端学习一】【网页设计】利用HTML和CSS制作了一个小网页.
前言 最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多 ...
- CSS特效(二):利用html和css制作毛玻璃特效和按钮动画效果
最终的效果图片: 毛玻璃效果:在style标签中,在form表单的before中利用filter的blur属性以及box-shadow的值设置,就可以做出form表单后面的毛玻璃效果背景,还要记得设置 ...
- 利用html和CSS制作的鲜花市场首页
顶部区域为一个导航条,导航条上是多个超链接,当鼠标悬停时字体会发生颜色改变. 广告区域可分为三个部分,一个是上部导航条,当鼠标悬停时,底部会出现边框,中部则放了一张和网页同宽的图片,底部是三个视频图片 ...
- 利用html与css写出的购物网页
任务目标: 利用html与css制作简易网页 内容:购物网通用 品优购官网 一.开头结尾基本相同 导航栏 <!-- 快捷导航模块 start --> <section class=& ...
最新文章
- 华为对边缘计算的思考与理解
- android 日历按周获取,Android日历获取当前周,前几周和下周
- const char * 和 char const * 和 char * const 区别
- linux下屏幕太靠右了,怎么消除linux下的屏幕偏移现象和调整屏幕刷新率?
- redis install note
- RHEL6基础之八查找、文件内容查看类命令
- php业务网站资源网,企业创意业务网站模板
- 引入阿里云GA,商米加速IoT产品和解决方案全球化布局
- python命令行进入帮助模式_Python 命令行之旅:深入 click 之选项篇
- smartconfig配置模式
- Linux使用——Linux命令——CentOS7防火墙使用
- pe如何自动加载外置工具_winpe无法加载外置程序解决方法
- oracle 19c ora-01017,Oracle 19c RMAN 连接PDB ORA-01017 错误解决方法
- common模块的依赖问题
- Vue中ref的三种用法
- matlab中的三次样条曲线拟合,三次样条拟合典型实例.doc
- 教你编写DOTA外挂
- 电脑上的ofd格式文件如何打开呢_OFD文件怎么打开?如何将ofd转成PDF格式?
- IDC数据中心机房如何选择虚拟机和物理机?
- js json字符串 转为json数组
热门文章
- 把下列c语言的语句改写成汇编语言的程序片段,其中变量都为整形变量,汇编程序设计读书笔记(4)...
- 【愚公系列】2022年06月 ASP.NET Core下CellReport报表工具基本介绍和使用
- CeSi 进程集中管理部署
- 系统中负负得正的兼容逻辑也许暂时能跑起来, 但迟早会坑人!
- 解决LS-DYNA中负体积方法
- 谈谈mq消息消费的几种方式
- 面试官问:为什么 Java 线程没有Running状态?我懵了
- 编译go文件时内部包引用受限的问题(use of internal package /PATH/ not allowed)
- 测试员入职新公司如何快速熟悉新业务?
- 欧格教育:差评对店铺有哪些影响