订餐系统—悬浮按钮

最新推荐文章于 2023-06-29 15:32:53 发布

世代庄少主

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量219

点赞数

分类专栏：项目实战之大米订餐系统

本文链接：https://blog.csdn.net/fjt123068/article/details/80795420

版权

项目实战之大米订餐系统专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【前言】

最近一个订餐系统中的悬浮按钮、着实困扰了我有几天时间。

【正文】

画出来很简单：

       <button type="button" id="ButtonFloat" class="float-button" style="margin-top: 10px; width: 50px; height:50px; margin: 0 auto;"
        οnclick="btnFloat()">提交</button>

调样式很简单：

         .float-button {
            position: fixed;
            height: 90px;
            width: 40px;
            bottom: 80px;
            right: 50px;
            background: #007aff;
        }

找到原有的订餐的JavaScript的固有方法和参数让我找了好几个小时。提交按钮写了一大堆，结果没有一个是用的。参数居然用的是页面的标签而不是原先想的订餐号之类的什么。

        function getidtoday() {
            var num = spanNum.innerText;
            var id = "";
            switch (num) {
                case "1":
                    id = "span1LB";                   
                    break;
                case "2":
                   id = "span2LB";
                    break;
                case "3":
                    id = "span3LB";
                    break;
                case "4":
                    id = "span4LB";
                    break;
                case "5":
                    id = "span5LB";
                    break;
                case "6":
                    id = "span6LB";
                    break;
                case "7":
                    id = "span7LB";
                    break;
            }
          return id ;
        };

        function btnFloat() {
            var id = getidtoday();
            IsFirstOrder(id);
        }

【总结】

大家的思路果然很多！层出不穷。