PC e-commerce shopping cart settlement page

    <script>
      $(function() {
      // Select all: keeps the status of the check items consistent with that of the select all button:
      // 1: The checked state of the child button is the same as that of the all-check button: the all-check button is bound to the change event, and the inherent checked attribute of the J-checkbox is its checked state
      // 2: Check the status of the inherent property checked (default is true) and let cart-Item add the class style check-cart-item checked
      // Instead cartitem removes the class style and unhighlights it
      $('.checkall').change(function() {$('.j-checkbox, .checkall').prop("checked", $(this).prop('checked'))
          if ($(this).prop('checked')) {$('.cart-item').addClass('check-cart-item')}else{$('.cart-item').removeClass('check-cart-item')}})// Check function: Check all is checked, the all button is also checked, and the background of the product is highlighted
      // 3: chang event of check box. If the length of check box status === number of check boxes, the inherent attribute of all check boxes is checked, and otherwise is not checked
      // 4: If the inherent checked state is checked, make the cart-item in the parent element check-cart-item highlighted, and vice versa
      $('.j-checkbox').change(function() {
        if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
          $('.checkall').prop('checked'.true)}else{$('.checkall').prop('checked'.false)}if($(this).prop('checked')) {$(this).parents('.cart-item').addClass('check-cart-item')}else{$(this).parents('.cart-item').removeClass('check-cart-item')}})// + Add item: Modify the value in the input box and the price in p-sum
      // increment increment = itxt val; // increment = itxt val
      // get the HTML of the parent element pprice (p*n), assign it to p, substr ￥(p*n), use toFxied to keep 2 decimal places,
      // add $+price to the parent element's sibling, p-sum. Call getSum to sum
      $('.increment').click(function() {
        var n = $(this).siblings('.itxt').val()
        n++
        $(this).siblings('.itxt').val(n)
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1)
        var price =  (p * n).toFixed(2The $()this).parents('.p-num').siblings('.p-sum').html(A '$' + price)
        getSum()
      })

      // - minus event: modify input box and commodity price:
      //.decrement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement rement
      // n-- each time you click decrement, the result of n is displayed in the input box,
      // create p, get the HTML content of the parent element p-sum, and then display ￥, and then display ￥+(p*n). ToFixed
      $('.decrement').click(function() {
        var n  = $(this).siblings('.itxt').val()
        if (n == 1) {
          return false
        }
        n--
        $(this).siblings('.itxt').val(n)
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1The $()this).parents('.p-num').siblings('.p-sum').html(A '$' + (p * n).toFixed(2))
        getSum()
      })

      // The input box modifies the value, and the commodity price changes with it
      //. Itxt change event, get its own value to n, and get the contents of its parent element p-num's brother p-price
      // The result of the concatenation is displayed in the HTML of psum, the sibling element of the parent element p-num
      $('.itxt').change(function() {
        var n = $(this).val()
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1The $()this).parents('.p-num').siblings('.p-sum').html(A '$' + (p * n).toFixed(2))
        getSum()
      })
      
      // Encapsulate summation, each traversal to take the number of input boxes and the total price of the item
      // encapsulate getSum, create count 0, and money 0,
      // itxt is traversed by each, with 1 I as the subscript, ele as the input box itself, count+= as the element's value, and parseInt as the integer
      // Display the count quantity in the em element of.amount-sum
      // use each to iterate over the p-sum, let moeny+= keep the decimal and cut off the first digit, and assign to money. Display money with 2 decimal places in EM
      getSum()

      function getSum() {
        var count = 0
        var money = 0
        $('.itxt').each(function(i, ele) {
          count += parseInt($(ele).val())
         
        })
	 $('.amount-sum em').text(count)
        $('.p-sum').each(function(i, ele) {
          money += parseFloat($(ele).text().substr(1The $()})'.price-sum em').text(A '$'+ money.toFixed(2))}// Delete item: Click a in p-action to kill your parent cart-item and call getSum
      $('.p-action a').click(function() {$(this).parents('.cart-item').remove()
        getSum()
      })
      // Delete multiple items: Click renove-Batch to kill the parent cart-item whose checkbox status is selected, and call getSum
      $('.remove-batch').click(function() {$('.j-checkbox:checked').parents('.cart-item').remove()
        getSum()
      })
      // Empty the cart: Hit the clear-all empty button to kill all cart-Items and call getSum
      $('.clear-all').click(function() {$('.cart-item').remove()
        getSum()
      })
      })
    </script>
Copy the code

Commercial elevator navigation

 $(function () {
        // Create throttle, create toolTop to accept the distance from the top of the page recommend, call toggelTool
        var flag = true;
        var toolTop = $('.recommend').offset().top;
        toggleTool();

        // Encapsulate functions to show and hide elevators:
        // Wrap the toggleTool function to determine the page scrollTop>=toolTop beyond the fixedTool elevator, otherwise hide
        function toggleTool() {
          if ($(document).scrollTop() >= toolTop) {
            $('.fixedtool').fadeIn();
          } else{$('.fixedtool').fadeOut(); }}// Listen to the page scroll event and display the corresponding floor according to the commodity area:
        // Listen for the window.scroll event, call the toggleTool function, check that the throttle is on, and the.w in.floor, if the page scrolls out of the window beyond ofset().top for each layer, call li in fixedTool, Add the current style according to I, and remove the style from the sibling element
        $(window).scroll(function () {
          toggleTool();
          if (flag) {
            $('.floor .w').each(function (i, ele) {
              if ($(document).scrollTop() >= $(ele).offset().top) {
                $('.fixedtool li')
                  .eq(i)
                  .addClass('current') .siblings() .removeClass(); }}); }});// Click the elevator floor and scroll to the corresponding product page area:
        //. Fixedtool li clicks the event, closes the choke valve, creates current, receives floor.w retrieves offset().top according to its index, retrieves the current position of the merchandise area
        // Body, HTML calls animate to make scrollTop:current, scroll to the current page position, close the throttle in the callback function,
        // Add your own highlighting style and remove the sibling's class style
        $('.fixedtool li').click(function () {
          flag = false;
          var current = $('.floor .w').eq($(this).index()).offset().top;
          $('body, html')
            .stop()
            .animate(
              {
                scrollTop: current,
              },
              function () {
                flag = false; }); $(this).addClass('current').siblings().removeClass();
        });
      });
Copy the code

Message Box Case

  <body>
    <div class="box" id="weibo">
      <span>Weibo release</span>
      <textarea name="" class="txt" cols="30" rows="10"></textarea>
      <button class="btn">release</button>
      <ul></ul>
    </div>

    <script>
      $(function () {
        // Button click event, dynamically create li element, set the HRML content of Li, that is, the content of the input box + A label, add Li to ul, slideDown display, and clear the content in the message box
        $('.btn').click(function () {
          console.log(1);
          var li = $('<li></li>');
          li.html($('.txt').val() + ' delete < / a > ');
          $('ul').prepend(li);
          li.slideDown();
          $('.txt').val(' ');
        });
        // bind a to ul, get the parent element, use slideUp to open the function, and kill yourself
        $('ul').on('click'.'a'.function () {$(this)
            .parents('ul')
            .slideUp(function () {$(this).remove();
            });
        });
      });
    </script>
  </body>
Copy the code

Todolist case

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="Add ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section>
      <h2>The ongoing<span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box"></ol>
      <h2>Has been completed<span id="donecount"></span></h2>
      <ul id="donelist"></ul>
    </section>
    <footer>Copyright &copy; 2014 todolist.cn</footer>

    <script
      type="text/javascript"
      src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"
    ></script>
    <script>
      $(function () {
        // Input box event, press Enter if there is no content pop-up, instead get local data, insert an object into the array, then save locally, load update page.
        // 1: loads the function
        // 2: listen for the keydown event of #title. If the value is equal to 13, check for e.keycode. Instead, call getDate and assign the value to local
        // 3: local. Push inserts an object into the array, title is the value of the input field, done is false by default, saveDate stores the object, load updates the page, and empty the contents of the input field

        $('#title').on('keydown'.function (e) {
          if (e.keyCode === 13) {
            if ($(this).val() === ' ') {
              alert('Please enter content');
            } else {
              var local = getDate();
              local.push({ title: $(this).val(), done: false });
              saveDate(local);
              load();
              $(this).val(' '); }}});// Delete task: use getDate to get data, use attr to get ID, use splice to delete 1, save and refresh.
        / / 4: Bind click event to A in OL and UL at the same time, call getDate to get local data and assign value to Date, get self-defined attribute ID and assign value to ID, data call splice, delete 1 item from array according to index, call saveDate function to save data, call load function to refresh the page
        $('ol, ul').on('click'.'a'.function () {
          var date = getDate();
          var id = $(this).attr('id');
          date.splice(id, 1);
          saveDate(date);
          load();
        });

        // Click input toggle completed and not completed, get data, get a tag ID, let each item in the array according to the ID of the checked check status, complete data saving, and load data update
        // 5: To bind the input event in OL and UL, first get the data from getDate and assign the value to Date, then get the custom attribute ID of its sibling element and assign the value to index. Let data[index]. Done receive their own inherent attributes checked remain consistent, saveDate save data, load refresh page data
        $('ol, ul').on('click'.'input'.function () {
          var data = getDate();
          var id = $(this).siblings('a').attr('id');
          data[id].done = $(this).prop('checked');
          saveDate(data);
          load();
        });

        // Get local data, save local data, load render data
        // 1: obtain local data:
        Parse todolist; // Obtain todolist array from localstorage. getItem, assign value to data, judge if data is not null, use json. parse to convert data to object and return. Otherwise an empty array is returned.
        function getDate() {
          var data = localStorage.getItem('todolist');
          if(data ! = =null) {
            return JSON.parse(data);
          } else {
            return[]; }}// Save local data: assign saveDate function with parameter data, use localstorage. setItem to save data named todolist, convert property value to JSON string to save data with json. stringify
        function saveDate(data) {
          localStorage.setItem('todolist'.JSON.stringify(data));
        }

        // Wrap the load function, first get the data from getDate and assign the value to data, empty ol and ul with empty, create 2 new variables, todoCount and doneCount, both with initial value 0.
        // Use $.each to iterate over the data, with I representing the number and n representing the specific element. To check whether the n.done attribute is complete, add new data like ul prepend, add inpit and p+a tag to li tag, a tag has its own id+ I, let doneCount++
        // Instead of using ol, use prepend to add li+p title, +a with id. Let todoCount++ count the number of outstanding
        // Finally, the text assignment in #todoCount is displayed on the page.
        function load() {
          var data = getDate();
          $('ol, ul').empty();
          var todoCount = 0;
          var doneCount = 0;
          $.each(data, function (i, ele) {
            if (ele.done) {
              $('ul').prepend(
                '<li><input type="checkbox" checked = "checked"><p>' +
                  ele.title +
                  '</p><a href="javascript:;" id=' +
                  i +
                  '></a></li>'
              );
              doneCount++;
            } else{$('ol').prepend(
                '<li><input type="checkbox"><p>' +
                  ele.title +
                  '</p><a href="javascript:;" id=' +
                  i +
                  '></a></li>'); todoCount++; }}); $('#todoCount').text(todoCount);
          $('#doneCount').text(doneCount); }});</script>
  </body>
Copy the code