Home > Article > Web Front-end > Javascript imitates Taobao credit evaluation example (with source code)_javascript skills
Javascript imitates Taobao credit evaluation example (with source code)_javascript skills
- WBOYOriginal
- 2016-05-16 15:29:331448browse
The example in this article describes the implementation method of Javascript imitating Taobao credit evaluation. Share it with everyone for your reference, the details are as follows:
The boss held a meeting yesterday and said that he would add a credit evaluation function to the company’s shopping platform and refer to Taobao for user experience.
So I did some research today and used jQuery to simulate a similar effect:
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模仿淘宝的信用评价</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var rateMessage = {
'rate-1': {
'rate-1': '差得太离谱，与卖家描述的严重不符，非常不满',
'rate-2': '部分有破损，与卖家描述的不符，不满意',
'rate-3': '质量一般，没有卖家描述的那么好',
'rate-4': '质量不错，与卖家描述的基本一致，还是挺满意的',
'rate-5': '质量非常好，与卖家描述的完全一致，非常满意'
},
'rate-2': {
'rate-1': '卖家态度很差，还骂人、说脏话，简直不把顾客当回事',
'rate-2': '卖家有点不耐烦，承诺的服务也兑现不了',
'rate-3': '卖家回复问题很慢，态度一般，谈不上沟通顺畅',
'rate-4': '卖家服务挺好的，沟通挺顺畅的，总体满意',
'rate-5': '卖家的服务太棒了，考虑非常周到，完全超出期望值'
},
'rate-3': {
'rate-1': '再三提醒下，卖家才发货，耽误我的时间，包装也很马虎',
'rate-2': '卖家发货有点慢的，催了几次终于发货了',
'rate-3': '卖家发货速度一般，提醒后才发货的',
'rate-4': '卖家发货挺及时的，运费收取很合理',
'rate-5': '卖家发货速度非常快，包装非常仔细、严实'
},
'rate-4': {
'rate-1': '物流公司态度非常差，送货慢，外包装有破损',
'rate-2': '物流公司服务态度挺差，运送速度太慢',
'rate-3': '物流公司服务态度一般，运送速度一般',
'rate-4': '物流公司态度还好吧，送货速度挺快的',
'rate-5': '物流公司服务态度很好，运送速度很快'
}
};
$().ready(function () {
var starInit = $("#starInit");
var ulStars = $("#ulStars");
var txtStar = $("#txtStar");
var tip = $("#tip");
var rate_1_result = $("#rate_1_result");
var star_wrap = $("#star_wrap");
starInit.hover(function () {
starInit.hide();
star_wrap.show();
})
var oLis = $("#ulStars li");
oLis.each(function (i) {
$(this).click(function () {
var iStar = parseInt($(this).attr("star"), 10);
txtStar.val(iStar);
rate_1_result.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
}).hover(function () {
var iStar = parseInt($(this).attr("star"), 10);
for (var i = 0; i < oLis.length; i++) {
var _temp = oLis[i];
if (_temp.attributes["star"].value <= iStar) {
if (iStar >= 3) {
_temp.className = "good";
}
else {
_temp.className = "bad";
}
}
else {
_temp.className = "";
}
}
}, function () {
if (txtStar.val() != "") {
var iSelectedStar = parseInt(txtStar.val(), 10);
for (var i = 0; i < oLis.length; i++) {
var _temp = oLis[i];
if (_temp.attributes["star"].value > iSelectedStar) {
_temp.className = "";
}
else {
var iSelfStar = parseInt(_temp.attributes["star"].value, 10);
if (iSelfStar >= 3) {
_temp.className = "good";
}
else {
if (iSelectedStar >= 3) {
_temp.className = "good";
}
else {
_temp.className = "bad";
}
}
}
}
}
}).mousemove(function (e) {
var intX = 0, intY = 0;
if (e == null) {
e = window.event;
}
if (e.pageX || e.pageY) {
intX = e.pageX; intY = e.pageY;
}
else if (e.clientX || e.clientY) {
if (document.documentElement.scrollTop) {
intX = e.clientX + document.documentElement.scrollLeft;
intY = e.clientY + document.documentElement.scrollTop;
}
else {
intX = e.clientX + document.body.scrollLeft;
intY = e.clientY + document.body.scrollTop;
}
}
var tipbar = tip.get(0);
tipbar.style.top = (intY + 20) + "px";
tipbar.style.left = (intX - 95) + "px";
tipbar.style.display = "";
var iStar = parseInt($(this).attr("star"), 10);
tip.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
}).mouseout(function () {
tip.hide();
})
})
star_wrap.hover(function () { }, function () {
setTimeout(initStar, 50);
})
ulStars.hover(function () { }, function () { setTimeout(initStar, 50); });
var initStar = function () {
if (txtStar.val() == "") {
star_wrap.hide();
starInit.show();
for (var i = 0; i < oLis.length; i++) {
var _temp = oLis[i];
_temp.className = "";
}
}
}
})
</script>
<style type="text/css">
* { padding: 0; margin: 0; list-style: none; font-size: 12px; }
#starBox { margin: 100px; }
#starInit { width: 120px; height: 36px; overflow: hidden; float: left; }
#star_wrap, #ulStars { width: 120px; height: 18px; overflow: hidden; float: left; }
#ulStars li { width: 19px; height: 18px; background: url(bg.gif) no-repeat -278px -96px; float: left; margin-right: 5px; cursor: pointer; }
#ulStars li.good { background: url(bg.gif) no-repeat -278px -52px; }
#ulStars li.bad { background: url(bg.gif) no-repeat -278px -73px; }
#tip { width: 171px; height: 67px; background: url(bg.gif) no-repeat -40px -167px; padding: 15px 3px 0 5px; line-height: 18px; }
#txtStar { position: absolute; left: 0; top: -30px; }
#rate_1_result { float: left; line-height: 25px; text-indent: 15px; color: Red; }
</style>
</head>
<body>
<div id="starBox">
<div id="starInit">
<img src="star_init.gif" alt="Javascript imitates Taobao credit evaluation example (with source code)_javascript skills" />
</div>
<div id="star_wrap" style="display: none">
<ul id="ulStars">
<li star="1"></li>
<li star="2"></li>
<li star="3"></li>
<li star="4"></li>
<li star="5"></li>
</ul>
</div>
<div id="rate_1_result">←点击星星就能评价了</div>
<input type="text" id="txtStar" style="width: 30px" value="" />
<div id="tip" style="position: absolute; display: none"></div>
</div>
</body>
</html>
Click here for complete example codeDownload from this site.
I hope this article will be helpful to everyone in JavaScript programming.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Jquery checks whether the mobile phone number complies with the rules and sets the submit button to different states based on the mobile phone number detection results_jqueryNext article：Jquery checks whether the mobile phone number complies with the rules and sets the submit button to different states based on the mobile phone number detection results_jquery
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills