Maison >interface Web >js tutoriel >Javascript imite un exemple d'évaluation de crédit Taobao (avec code source)_compétences javascript
Javascript imite un exemple d'évaluation de crédit Taobao (avec code source)_compétences javascript
- WBOYoriginal
- 2016-05-16 15:29:331503parcourir
L'exemple de cet article décrit la méthode d'implémentation de Javascript imitant l'évaluation de crédit Taobao. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Le patron a tenu une réunion hier et a déclaré qu'il ajouterait une fonction d'évaluation de crédit à la plateforme d'achat de l'entreprise et se référerait à Taobao pour l'expérience utilisateur.
J'ai donc fait quelques recherches aujourd'hui et utilisé jQuery pour simuler un effet similaire :
Le code est le suivant :
<!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 imite un exemple dévaluation de crédit Taobao (avec code source)_compétences javascript" />
</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>
Cliquez ici pour un exemple de code completTéléchargez depuis ce site.
J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Jquery vérifie si le numéro de téléphone mobile est conforme aux règles et définit le bouton de soumission sur différents états en fonction des résultats de détection du numéro de téléphone mobile_jqueryArticle suivant：Jquery vérifie si le numéro de téléphone mobile est conforme aux règles et définit le bouton de soumission sur différents états en fonction des résultats de détection du numéro de téléphone mobile_jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript