淘宝網を模倣したJavaScriptによる信用評価例（ソースコード付き）_JavaScriptスキル
この記事の例では、淘宝網の信用評価を模倣したJavaScriptの実装方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
上司は昨日会議を開き、会社のショッピングプラットフォームに信用評価機能を追加し、ユーザーエクスペリエンスについてタオバオを参考にすると言った。
そこで私は今日いくつかの調査を行い、jQuery を使用して同様の効果をシミュレートしました。
コードは次のとおりです:
<!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="/static/imghw/default1.png" data-src="star_init.gif" class="lazy" alt="淘宝網を模倣したJavaScriptによる信用評価例（ソースコード付き）_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>完全なサンプルコードについてはここをクリックしてくださいこのサイトからダウンロードしてください。
この記事が JavaScript プログラミングのすべての人に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
JavaScriptでinsertBeforeを使用する方法
Nov 24, 2023 am 11:56 AM
使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
