简易点菜器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script> 

    <style>

        .header{

            width: 300px;

            margin:0 auto;

            padding: 40px;

        }

        .header h1{

            text-align: center;

            position: absolute;

            font-size: 20px;

            top:9px;

            left:46%;

            margin-left: -20px;

        }

        .header span{

            padding: 10px;

            background-color:#FF5000;

            border: 1px solid #ccc;

            display: inline-block;

            margin: 10px;

        }

        .header button{

            width: 50px;

            position:relative;

            left:-46%;

top: 50px;

        }

    </style>

    </head>

    <body>

        <div class="header">

            <h1>点菜器</h1>

                <span>鱼香肉丝</span>

                <span>毛血旺...</span>

                <span>辣子鸡...</span>

                <span>泡椒凤爪</span>

                <span>麻婆豆腐</span>

                <span>北京烤鸭</span>

            <span>麻婆豆腐</span>

            <span>荔枝肉...</span>

            <span>可乐鸡翅</span>

            <span>红烧排骨</span>

            <span>酸菜鱼...</span>

            <span>干锅鸭头</span>

                <button>开始点菜</button>

    </body>

    <script>

      $(function(){

              $('button').click(function(){

                  $('.list').on('click','span',function(){

                      $(this).css({"backgroundColor":"#cccccc",})

                  });

                  //get请求

                  $.get('03create.php',{num:$('input').val()},function(e){

                      $('.list').html('');

                      for(var i=0;i<e.length;i++){

                          $('<span>'+e[i]+'</span>').appendTo($('.list'));

                      }

                  },'json')

              });

          })

    </script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。