كتابة وظيفة مشتريات بسيطة باستخدام JavaScript

هناك الكثير من رموز الشيفرة حول تنفيذ عربة التسوق، اليوم قرأت بعض النقاط الرئيسية، وقررت البدء في الكتابة، لذلك كتبت عربة تسوق بسيطة، وسأشرح كيفية تحقيقها.　

1. تحقيق المحتوى باستخدام html؛　

2. زخرفة المظهر باستخدام css؛　

3. تصميم تأثير الحركة باستخدام js(jq).

الخطوة الأولى:أولاً، تصميم صفحة الـhtml. أستخدم div كبيرًا لضم جميع المنتجات، ثم أستخدم divات مختلفة لتغليف منتجات مختلفة، في قائمة المنتجات أستخدم ul li، والتفاصيل التالية للتحقيق كالتالي (المعلومات المتعلقة بالمنتجات في الكود ليست لها قيمة مرجعية، لأنها تم نسخها من الإنترنت):　

<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">25.00 ر.ع.</li>
    <li class="godinfo">بكثير من الشعر في كتاب "مجموعة الطيور" تم كتابته بالبنغالية، وقد تم ترجمة هذا المجموع إلى الصين لأول مرة من قبل السيد زhen zhenduo.</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">56.00 ر.ع.</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">بكتابة النص تُغلب على الزمن. أعمال فون تان الأكثر مبيعًا، المقالات هي أعماله التي تبيع أفضل وتحظى بأكبر شعبية.</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">25.00 ر.ع.</li>
    <li class="godinfo">بكثير من الشعر في كتاب "مجموعة الطيور" تم كتابته بالبنغالية، وقد تم ترجمة هذا المجموع إلى الصين لأول مرة من قبل السيد زhen zhenduo.</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

其中涉及到一个知识点：在 <li class="godadd"><a href="javascript:;">加入购物车</a></li>中，我用到了javascript:;这个的意思表示不进行跳转，执行一个空事件。　

第二步：进行外观设计，为了更好的显示，我将包含每个商品列表的div设置了width和height,以及border,值得注意的是，我为了让购物车固定在某个位置，将其position设置为fixed，然后通过设置top和left让其固定在你想要的位置上。另外，要学会灵活使用margin和padding，让显示更美观。　

注：如果想给行内元素设置width和height或者其他块级元素的属性，那么需要设置display:block才可以。　

具体设计代码如下：　

* {
 padding: 0px;
 margin: 0px;
 font-family: "微软雅黑";
}
.goodsItem{
 width:280px;
 height: 400px;
 float: left;
 border: 1px solid #ccc;
 margin:5px;
}
#goods{
 width:910px;
}
.goditem{
 list-style: none;
}
.godpic img{
 display: block;
 width:250px;
 height: 250px;
 margin:0px auto;
}
.godprice,.godinfo,.godadd{
 display: block;
 width:220px;
 margin:0px auto;
 text-align: center;
}
.godprice{
 font-size: 20px;
 color: #f00;
}
.godinfo{
 text-align: center;
 font-size: 14px;
 margin: 10px 0px;
}
.godadd a{
 display: block;
 width: 150px;
 height: 36px;
 background-color: #fd6a01;
 border-radius: 10px;
 margin: 0px auto;
 text-decoration: none;
 color:#fff;
 line-height: 36px;
}
#godcar{
 position: fixed;
 right: 0px;
 top:40%;
 width: 72px;
 height: 64px;
}
#godcar .dnum{
 width:24px;
 height: 24px;
 border-radius: 12px;
 background-color: #f00;
 text-align: center;
 line-height: 24px;
 position: absolute;
 font-size: 12px;
 top:0px;
}
.godadd .bg {
 background-color: #808080;
}

النجم الأول * يعني تعيين خصائص لجميع العناصر، إنه من الجيد في البداية تعيين margin وpadding.

الخطوة الثالثة:تم تحقيق الصفحة الثابتة، والآن نحتاج إلى استخدام jq لتحقيق التفاصيل الخاصة بالسلة التسوقية، مثل إضافة السلة التسوقية، وتغيير عدد السلة. قضيت بعض الوقت في التصميم: كيفية تحريك الصورة إلى سلة التسوقية ببطء، ثم تقليل حجمها، وأخيرًا إزالتها. في هذا السياق، استخدمت دالة animate لتحقيق هذا العملية. الصعوبة في تحقيق هذه الميزة تكمن في كيفية تحريك الصورة وكيفية تغيير حجمها.　

الآن سأشرح كيفية تحقيق هذا العمل:　

1) أولاً، تحتاج إلى الحصول على صورة المنتج، ثم نسخ الصورة التي تم الحصول عليها؛

var img = $(this).parent().find(".godpic").find("img");
 var cimg = img.clone();

2) الحصول على قيم top و left للصورة的商品، وقيم top و left لعربة التسوق، فقط من خلال دالة animate يمكن تحقيق الحركة؛ var imgtop = img.offset().top;

var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left; 

3) كتابة دالة animate لتحقيق تأثير محدد؛
　cimg.appendTo($("body")).css({

    "position": "absolute",// التثبيت النسبي
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" // شفافية
   }, 1000, function () {
    cimg.remove(); // اختفاء الصورة
    $(".dnum").text(i); // تغيير عدد عربة التسوق
   });

تم تحقيق الحركة البسيطة والتغيير بسهولة.

لكن بعد ذلك، قررت أن ليس من المناسب أن يعود عدد عربة التسوق إلى صفر عند كل تحديث، لذا فكرت في كيفية عدم تغيير عدد عربة التسوق عند تحديث الصفحة، وبعد البحث والتجميع، وضعت ثلاث طرق:　

(1) الحفظ في قاعدة البيانات؛　
(2) من خلال استخدام طريقة cookie؛　
(3) من خلال استخدام طريقة localStorage الخاصة بـ h5؛　

في النهاية، قررت استخدام الطريقة الثالثة لأنني أردت تجربة طريقة جديدة في h5 (من باب الفضول ~، أيضًا لأنني رأيت هذه الطريقة، فحاولتها)، لا توجد محدودية زمنية للبيانات المحفوظة باستخدام localStorage. يمكن استخدام البيانات بعد يوم أو أسبوع أو سنة بعد ذلك. إن تنفيذ كودي المحدد هو localStorage.getItem.

حسنًا، تم الانتهاء من كل ما يجب ذكره، وسيتم تقديم جميع كودات jQuery، إذا أعجبك فهذا يعني إعطاء إشارة إلى إعجاب:

var i = 0;
$(function(){
 var inum = 0;
 if(localStorage.getItem("inum")!==null){
  inum = localStorage.getItem("inum");
 }
 $(".dnum").text(inum);
 $(".godadd").click(function(){
  if (!$(this).find("a").hasClass("bg")) {
   i++;
   $(this).find("a").addClass("bg");
   var img = $(this).parent().find(".godpic").find("img");
   var cimg = img.clone();
   var imgtop = img.offset().top;
   var imgleft = img.offset().left;
   var cartop = $("#godcar").offset().top;
   var carleft = $("#godcar").offset().left;
   cimg.appendTo($("body")).css({
    "position": "absolute",
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  }
 });
}); 

صورة التوضيح:

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أن تشجعوا تعليمات النمط.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، وتعود حقوق الطبع والنشر إلى المالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت وتم تحميلها بشكل مستقل، ويحمل هذا الموقع حقوق الملكية، ولم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدم الدليل على الدليل، إذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم فوراً.