（商品评价页）商品星级评分html+css+js

html部分:

<div class="evaluate_main"><div class="evaluate_title"><div class="line"></div>我的评价</div><div class="evaluateP_info"><div class="info_tit"><span style="color: #404040;">订单号：</span><span style="color: #9E9E9E;">2768294387409328020</span></div><div class="info_main"><div class="left"><div class="imgWrap"><img src="" alt=""></div><div class="description">【现货发】正宗福建茂谷柑水果橘子京东生鲜净重 5斤装当季新鲜水果胜沃柑皇帝柑 茂谷柑3斤中果</div><div class="price"><span>¥ 31</span><span>.00</span></div><div class="specification">5斤装×1</div></div><div class="right"><div class="right_tit">商品评分</div><div class="evaluate_div"><div><span>描述相符：</span><ul class="rating-level" id="stars1"><!-- start:value 即设置当前星数的分值 --><li><a class="one-star" star:value="100" href="#">100</a></li><li><a class="two-stars" star:value="200" href="#">200</a></li><li><a class="three-stars" star:value="300" href="#">300</a></li><li><a class="four-stars" star:value="400" href="#">400</a></li><li><a class="five-stars" star:value="500" href="#">500</a></li></ul><span class="result" id="stars1-tips"></span><input type="hidden" id="stars1-input" name="a" value="" size="2" /></div><div><span>服务态度：</span><ul class="rating-level" id="stars2"><!-- start:value 即设置当前星数的分值 --><li><a class="one-star" star:value="100" href="#">100</a></li><li><a class="two-stars" star:value="200" href="#">200</a></li><li><a class="three-stars" star:value="300" href="#">300</a></li><li><a class="four-stars" star:value="400" href="#">400</a></li><li><a class="five-stars" star:value="500" href="#">500</a></li></ul><span class="result" id="stars2-tips"></span><input type="hidden" id="stars2-input" name="a" value="" size="2" /></div><div><span>发货速度：</span><ul class="rating-level" id="stars3"><!-- start:value 即设置当前星数的分值 --><li><a class="one-star" star:value="100" href="#">100</a></li><li><a class="two-stars" star:value="200" href="#">200</a></li><li><a class="three-stars" star:value="300" href="#">300</a></li><li><a class="four-stars" star:value="400" href="#">400</a></li><li><a class="five-stars" star:value="500" href="#">500</a></li></ul><span class="result" id="stars3-tips"></span><input type="hidden" id="stars3-input" name="a" value="" size="2" /></div></div><form action=""><div class="form-check form-check-inline" style="margin-right: 30px;"><input class="form-check-input" type="radio" name="evaluate" value="3" id="good"><label class="form-check-label">好评</label></div><div class="form-check form-check-inline" style="margin-right: 30px;"><input class="form-check-input" type="radio" name="evaluate" value="2" checked id="soso"><label class="form-check-label">中评</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="evaluate" value="1" id="bad"><label class="form-check-label">差评</label></div><div class="form-group" style="display: flex;margin: 23px 0;"><label style="width: 80px;flex-shrink: 0;">问题描述：</label><textarea class="form-control" rows="4" style="resize: none;width: 348px;"></textarea></div><div class="form-group" style="display: flex"><label style="width: 80px;flex-shrink: 0;">上传凭证：</label><div class="imgList"><div class="imgWrap"><imgsrc="../resources/style/system/front/default/images/default.png" alt=""></div><div class="imgWrap"><imgsrc="../resources/style/system/front/default/images/default.png" alt=""></div><div class="imgWrap"><imgsrc="../resources/style/system/front/default/images/default.png" alt=""></div><div class="chooseFile">选择文件</div><small id="imgHelp"class="form-text text-muted">最多可上传3张图片，每张图片大小不超过5M,支持bmp,gif,jpg,png,jpeg格式文件</small><input id="upload" name="file" accept="image/*" type="file" style="display: none"><script>// 上传的方法$(function () {$(".chooseFile").click(function () {$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传$("#upload").on("change", function () {var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径console.log(objUrl, '输出图片路径')if (objUrl) {// $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片upimg();}});});});//建立一?可存取到?file的urlfunction getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}//上传头像到服务器function upimg() {console.log(344)var pic = $('#upload')[0].files[0];var file = new FormData();file.append('image', pic);$.ajax({url: "/uploadImg",type: "post",data: file,cache: false,contentType: false,processData: false,success: function (data) {console.log(data);var res = data;// $("#resimg").append("<img src='/" + res + "'>")}});}</script></div></div><div class="submit_evaluate">提交</div></form></div></div></div></div>

js部分：

// 提交按钮function submit_evaluate(){// 输出描述相符、服务态度、发货速度的评星value值console.log(document.getElementById("stars1-input").value)console.log(document.getElementById("stars2-input").value)console.log(document.getElementById("stars3-input").value)}var Class = {create: function () {return function () { this.initialize.apply(this, arguments); }}}var Extend = function (destination, source) {for (var property in source) {destination[property] = source[property];}}function stopDefault(e) {if (e && e.preventDefault) {e.preventDefault();} else {window.event.returnValue = false;}return false;}/*** 星星打分组件**/var Stars = Class.create();Stars.prototype = {initialize: function (star, options) {this.SetOptions(options); //默认属性var flag = 999; //定义全局指针var isIE = (document.all) ? true : false; //IE?var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表var input = document.getElementById(this.options.Input) || document.getElementById(star + "-input"); // 输出结果var tips = document.getElementById(this.options.Tips) || document.getElementById(star + "-tips"); // 打印提示var nowClass = " " + this.options.nowClass; // 定义选中星星样式名var tipsTxt = this.options.tipsTxt; // 定义提示文案var len = starlist.length; //星星数量for (i = 0; i < len; i++) { // 绑定事件 点击 鼠标滑过starlist[i].value = i;starlist[i].onclick = function (e) {stopDefault(e);this.className = this.className + nowClass;flag = this.value;input.value = this.getAttribute("star:value");tips.innerHTML = tipsTxt[this.value]}starlist[i].onmouseover = function () {if (flag < 999) {var reg = RegExp(nowClass, "g");starlist[flag].className = starlist[flag].className.replace(reg, "")}}starlist[i].onmouseout = function () {if (flag < 999) {starlist[flag].className = starlist[flag].className + nowClass;}}};if (isIE) { //FIX IE下样式错误var li = document.getElementById(star).getElementsByTagName('li');for (var i = 0, len = li.length; i < len; i++) {var c = li[i];if (c) {c.className = c.getElementsByTagName('a')[0].className;}}}},//设置默认属性SetOptions: function (options) {this.options = {//默认值Input: "",//设置触保存分数的INPUTTips: "",//设置提示文案容器nowClass: "current-rating",//选中的样式名tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"]//提示文案};Extend(this.options, options || {});}}/* For TEST */// function teststars() {//     alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)// }var Stars1 = new Stars("stars1", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })var Stars2 = new Stars("stars2", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })var Stars3 = new Stars("stars3", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })

其他引入的资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/reset.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/common.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

css部分：

.evaluate_main{background: #fff;padding: 14.5px 19px;width: 1192px;margin: 0 auto;padding-bottom: 28px;margin-bottom: 20px;
}.evaluate_title{font-size: 18px;color: #1E1E1E;display: flex;align-items: center;justify-content: flex-start;margin-bottom: 12px;
}.evaluate_title .line{width: 4px;height: 16px;background: #F5B937;margin-right: 6px;
}.evaluateP_info{border: 1px solid rgba(231,231,231,1);
}.evaluateP_info .info_tit{padding: 6px 8.5px;background: #F5F5F5;font-size: 7px;
}.info_main{display: flex;justify-content: space-between;
}.info_main .left {padding: 31.5px 55px;padding-top: 63px;flex-shrink: 0;border-right: 1px solid #E7E7E7;
}.info_main .left .imgWrap{width: 282px;margin: 0 auto;margin-bottom: 15px;border: 1px solid #000;
}.info_main .left .imgWrap img{height: 220px;width: 100%;
}.info_main .left .description{color: #232323;font-weight: 400;font-size: 7px;margin-bottom: 22px;width: 341px;text-align: center;line-height: 22.79px;display: -webkit-box;-webkit-box-orient: vertical;/* 代表第几行进行超出部分省略的操作 */-webkit-line-clamp: 3;overflow: hidden;
}.info_main .left .price{color: #E1251B;font-size: 10px;display: flex;align-items: center;justify-content: center;margin-bottom: 23px;
}.info_main .left .price span:nth-child(1){font-size: 18px;
}.info_main .left .price span:nth-child(2){font-size: 14px;
}.info_main .left .specification{color: #9C9C9C;font-size: 14px;text-align: center;
}.info_main .right{padding: 27px 35px;flex:1
}.info_main .right .right_tit{font-size: 18px;color: #161616;font-weight: 400;
}.info_main .right .evaluate_div{font-size: 14px;color: #727272;padding: 16px 0;
}.info_main .right .evaluate_div div{margin: 8px 0;display: flex;align-items: center;
}.info_main .right input:focus,
.info_main .right textarea:focus,
.info_main .right .form-control:focus{box-shadow: none;border-color: #ced4da;
}.info_main .right textarea{background: #F4F4F4;
}.info_main .right .imgList{flex: 1;display: flex;justify-content: flex-start;align-items: flex-end;flex-wrap: wrap;
}.info_main .right .imgList .imgWrap{display: inline-block;width: 85px;height: 80px;margin-right: 10px;
}.info_main .right .imgList .imgWrap img{width: 100%;height: 100%;
}.chooseFile{vertical-align: baseline;padding: 6px 10px;color: #F5B937;border: 1px solid #F5B937;display: inline-block;font-size: 12px;border-radius: 3px;cursor: pointer;
}#imgHelp{font-size: 10px;color: #C6C6C6;margin-top: 13px;
}.submit_evaluate{background:rgba(245,185,55,1);border-radius:4px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:rgba(255,255,255,1);display: inline-block;padding: 0px 20px;margin-top: 40px;margin-left: 110px;margin-bottom: 41px;cursor: pointer;line-height: 36px;
}input::placeholder,
select::placeholder,
textarea::placeholder{font-size: 14px!important;
}input,select,textarea{font-size: 14px!important;background: #F4F4F4!important;border:1px solid rgba(228,228,228,1)!important
}/* 星级评分 */
.shop-rating {height: 25px;overflow: hidden;zoom: 1;padding: 2px 0px;position: relative;z-index: 999;
}.shop-rating span {height: 23px;display: block;line-height: 23px;float: left;
}.shop-rating span.title {width: 125px;text-align: right;margin-right: 5px;
}.shop-rating ul {float: left;margin: 0;padding: 0
}.shop-rating .result {margin-left: 20px;padding-top: 2px;
}.shop-rating .result span {color: #ff6d02;
}.shop-rating .result em {color: #f60;font-family: arial;font-weight: bold;
}.shop-rating .result strong {color: #666666;font-weight: normal;
}.rating-level,
.rating-level a {background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;
}.rating-level {background-position: 0px 0px;width: 120px;height: 23px;position: relative;z-index: 1000;margin-right: 10px;
}.rating-level li {display: inline;
}.rating-level a {line-height: 23px;height: 23px;position: absolute;top: 0px;left: 0px;text-indent: -999em;*zoom: 1;outline: none;
}.rating-level a.one-star {width: 20%;z-index: 6;
}.rating-level a.two-stars {width: 40%;z-index: 5;
}.rating-level a.three-stars {width: 60%;z-index: 4;
}.rating-level a.four-stars {width: 80%;z-index: 3;
}.rating-level a.five-stars {width: 100%;z-index: 2;
}.rating-level .current-rating,
.rating-level a:hover {background-position: 0 -28px;
}.rating-level a.one-star:hover,
.rating-level a.two-stars:hover,
.rating-level a.one-star.current-rating,
.rating-level a.two-stars.current-rating {background-position: 0 -116px;
}.rating-level .three-stars .current-rating,
.rating-level .four-stars .current-rating,
.rating-level .five-stars .current-rating {background-position: 0 -28px;
}

（商品评价页）商品星级评分html+css+js相关推荐

【京东】商品详情页+商品列表数据采集
作为国内最大的电商平台之一,京东数据采集具有多个维度. 有人需要采集商品信息,包括品类.品牌.产品名.价格.销量等字段,以了解商品销售状况.热门商品属性,进行市场扩大和重要决策: 有人需要采集产品评论 ...
京东商品的放大镜效果实现（html+css+js）
京东商品首页随便选择一个商品进入到商品详情页,商品放大镜就是如下图所示的效果: 从图中分析可得: (1)首先在鼠标放置在商品上的时候会出现一个黄色的透明遮罩层 (2)遮罩层会随着鼠标的移动一起移动,这 ...
java 商品评价_java 商品评价计算算法
importjava.io.Serializable;importjava.lang.ref.ReferenceQueue;importjava.lang.ref.WeakReference;impo ...
html css星级评分,纯css实现星级评分效果
效果效果图如下星级评分实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字点击星星有放大旋转的动画 dom结构用form ...
商品详情页商品属性选择，包含多规格
近一年的时间没有更新过博客了,主要是在着手一个电商APP , 现在APP也上线了所以有时间整理一下这段时间踩过的一些坑,以及做过的一些常用功能. 商品详情属性选择是一个商城APP中相当常见的功能,思路 ...
ecshop 商品详情页商品放大镜功能
作用:放大图片. 步骤如下: 第一步:加载js文件. 在goods.dwt文件head部分加载: <script type="text/javascript" src=&qu ...
Android 仿京东淘宝商品详情页商品图片效果
最近重构商品,产品要求,按照淘宝京东来.... 成品如图这个效果思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码简单的界面布局 <?xml ve ...
js版星级评分入门级原生js实现
先理思路: 第一部分:HTML 第二部分:CSS 1.常规部分通配符 2.居中盒子部分 3. li标签(星星载体)部分 4.满意度盒子部分 5.评语盒子部分 6.星星改变位置部分第 ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...

（商品评价页）商品星级评分html+css+js

（商品评价页）商品星级评分html+css+js相关推荐

最新文章

热门文章