第一个练手项目（纪念）

最新推荐文章于 2024-09-14 15:26:51 发布
最新推荐文章于 2024-09-14 15:26:51 发布
阅读量377 收藏
点赞数
分类专栏： 学习积累 文章标签： html 代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZX052/article/details/49126547
版权

《当时刚刚自学html，接到一个练手项目，当时是学生身份，兴奋与迷茫，磕磕碰碰也完成了，中间经历才是最重要的，得到很多学习的方法。（现在看来代码有很多很多的不足，本文仅仅祭奠刚刚入行的自己，是一种回忆！）》

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./images/Logo1.png"/>
    <title> 。。。</title>
    <!--<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">-->
    <script src="./libs/jquery-1.6.4/jquery.min.js" type="text/javascript"></script>
    <!--<script src="js.js"></script>-->
    <!--<script src="js2.js"></script>-->
    <script type="text/javascript" src="lhgcore.js"></script>
    <script type="text/javascript" src="lhgcalendar.js"></script>

    <!--<script src="./bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>-->
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->

    <script type="text/javascript">


        $("input[type=checkbox]").click(countChecked);

        function countChecked() {
            var s = "";
            var snum = "";
            $("input[type=checkbox]:checked").each(function () {

                s = s + $(this).parent().text() + ",";
                snum = snum +"'" + $(this).val() + "'" + ",";

            });
            var n = $("input[type=checkbox]:checked").length;

            $("#text1").attr("value", s);
            $("#hidden1").attr("value", snum);

        }
        function UnCheck() {
            var div = document.getElementById("div7");
            var CheckBox = div.getElementsByTagName("input");
            for (i = 0; i < CheckBox.length; i++) {
                CheckBox[i].checked = false;
            }
            document.all("text1").value = "";

        }


        function btn1() {
            var x1 = document.getElementById("text2").offsetLeft;
            var y1 = document.getElementById("text2").offsetTop;

            var div1 = document.getElementById('div1');
            div1.style.position = "absolute";
            div1.style.top = y1 + 20 + "px";
            div1.style.left = x1 + "px";
            div1.style.display = 'block';

            if (div1.style.display == "block") {
                var div3 = document.getElementById("div3");
                var div4 = document.getElementById("div4");
                var div5 = document.getElementById("div5");
                var butn = document.getElementById('dvbutn');
                var y3 = div1.offsetHeight;
                var ybtn = butn.offsetHeight;
                var y5 = div5.offsetHeight;
                var y4 = div3.offsetHeight;

                butn.style.position = "absolute";
                butn.style.top = y1 + 27 + y3 + "px";
                butn.style.left = x1 - 63 + "px";
                butn.style.display = "block";

                div5.style.position = "absolute";
                div5.style.top = y1 + 20 + y3 + 35 + ybtn + "px";
                div5.style.left = x1 - 63 + "px";
                div5.display = "block";

                div3.style.position = "absolute";
                div3.style.top = y1 + 20 + y3 + y5 + 38 + ybtn + "px";
                div3.style.left = x1 + "px";
                div3.display = "block";


                div4.style.position = "absolute";
                div4.style.top = y1 + 20 + y3 + y5 + 16 + y4 + 40 + ybtn + "px";
                div4.display = "block";
                $.ajax({ //请求处理页
                    url: "./getSupermarketInfo", //处理页
                    dataType: "json",
                    type: "get",
                    //传送请求数据
                    data: "",
                    success: function (data) {
                        // console.log(strValue);
                        //成功后返回的数据
                        //根据返回值进行状态显示
                        //注意是True,不是true
                        var json = eval(data);
                        $('#marketname').html("");
                        var i = 0;
                        var html1 = "";
                        $.each(json, function (index, item) {
                            var supermarketName = json[index].supermarketName;
                            var supermarketNum = json[index].supermarketNum;
                            var html = "<label><input type='checkbox' name='+supermarketNum+'value='" + supermarketNum + "'/>" + supermarketName + "</label>";

                            if (i == 0) {
                                html1 += "<tr><td>" + html + "</td>"
                            } else {
                                if (i % 4 == 0 && i != 0) {
                                    html1 += "</tr><tr><td>" + html + "</td>"
                                } else {
                                    html1 += "<td>" + html + "</td>"
                                }

                            }


                            i += 1;
                        });

                        html1 += "</tr>";
                        $("#marketname").append(html1);

                    }
                })
            }

        }
        function btn2() {

            document.getElementById('div1').style.display = 'none';

            document.getElementById('div81').style.display = 'none';
            document.getElementById('dvbutn').style.display = 'none';

            var div3 = document.getElementById("div3");
            var div4 = document.getElementById("div4")
            var div5 = document.getElementById("div5");
            var y2 = document.getElementById("text2").offsetTop;
            var x2 = document.getElementById("text2").offsetLeft;

            var y5 = div5.offsetHeight;
            var y4 = div3.offsetHeight;

            div5.style.position = "absolute";
            div5.style.top = y2 + 70 + "px";
            div5.style.left = x2 - 63 + "px";
            div5.display = "block";

            div3.style.position = "absolute";
            div3.style.top = y2 + 110 + "px";
            div3.style.left = x2 + "px";
            div3.style.display = 'block';

            div4.style.position = "absolute";
            div4.style.top = y2 + 20 + y5 + 16 + y4 + 45 + "px";
            div4.display = "block";
            var _supermarketNum = document.getElementById("hidden1").value;
            var _deliverTime = document.getElementById("text2").value;

            $("#customers").html("");
            if (_supermarketNum != "" && _deliverTime != "") {
                $.ajax({ //请求处理页
                    url: "./grouping", //处理页
                    dataType: "json",
                    type: 'post',
                    //传送请求数据
                    data: {
                        supermarketNums: _supermarketNum,
                        deliverTime: _deliverTime
                    },
                    success: function (data) {
                        // console.log(strValue);
                        //成功后返回的数据
                        //根据返回值进行状态显示
                        var json = eval(data);
                        $.each(json, function (index, item) {
                            var vegetableName = json[index].vegetableName;
                            var vegetableNum = json[index].vegetableNum;
                            var count = json[index].count;
                            var measurementUnit = json[index].measurementUnit;


                            var htmltable = "<tr><td style='width: 18%'>" + vegetableName + "</td><td style='width: 35%'>" + vegetableNum + "</td><td style='width: 25%'>" + count + "</td><td>" + measurementUnit + "</td> </tr>"

                            $("#customers").append(htmltable);


                        });
                    },
                    error:function(){
                        alert("error");

                    }
                })

            }

        }
        function btn4() {
            var _supermarketNum = document.getElementById("hidden1").value;
            var _deliverTime = document.getElementById("text2").value;
            if (_supermarketNum != "" && _deliverTime != "") {

                window.open("./createExcel?supermarketNums=" + _supermarketNum + "&deliverTime=" + _deliverTime + "")
            }
        }


    </script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: snow;

        }

        .wrapper {
            width: 92%;
            height: 750px;

            background-image: url(./images/bg1.png);
            margin: 0px auto;
        }

        .heading {
            width: 100%;
            height: 90px;

            margin: 0px auto;
        }

        .heading_title {
            float: left;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
            color: burlywood;
        }

        .heading_nav {
            padding-bottom: 30px;
            padding-top: 30px;
            width: 100%;
            height: 40px;
            position: relative;
        }

        ul {
            margin-left: 40px;
            float: left;
            list-style-type: none;
            padding-top: 6px;
            padding-bottom: 6px;

        }

        li {
            padding-left: 10px;
            display: inline;
        }

        a:link, a:visited {
            font-weight: bold;
            color: darkgray;
            text-align: center;
            padding: 6px;
            text-decoration: none;
        }

        a:hover, a:active {
            color: dimgray;
        }

        .heading_img img {
            border-radius: 30px;
            display: inline;
            width: 120px;
            height: 120px;
            /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);*/
            margin: 0px auto;

        }

        .heading_soptlight form {
            float: right;
            width: 100px;
            height: 26px;
            position: relative;
            margin-right: 80px;

        }

        form input {
            height: 26px;
            border-radius: 30px;
        }

        .footing {
            padding-top: 20px;
            text-align: center;
            font-size: 10px;
            color: darkgray;
        }

        <!--
        body {
            background-color: snow;
        }

        -->
        #text1 {
            width: 50%;
            height: 15px;

            border-radius: 10px;
        }

        #text2 {
            height: 15px;
            border-radius: 10px;
        }

        div.div {
            background-color: green;
            position: absolute;
            width: 80%;
            top: 250px;
            left: 120px;
            float: left;
            /*left: 100px;*/

        }

        div.div1 {
            /*position: relative;*/

            width: 80%;
            height: 100px;
            float: left;
            padding: 1px;
            border: 1px solid #f9dd34;
            overflow-y: scroll;
        }

        div.div2 {

            position: absolute;
            top: 124px;

            padding: 1px;
            border: 1px solid #000;

        }

        div.div3 {
            position: absolute;
            top: 110px;
            left: 108px;
            width: 80%;
            height: 200px;
            padding: 1px;
            float: left;
            border: 0px;
            overflow-y: scroll;
        }

        div.div4 {
            position: absolute;
            top: 340px;
            left: 108px;
            width: 80%;
            padding: 1px;
            float: left;
            border: 0px;

        }

        div.div5 {

            position: absolute;
            top: 70px;
            left: 45px;
            height: 36px;
            width: 89%;
            padding: 1px;
            float: left;
            border: 0px;

        }

        div.dvbutn {

            position: absolute;
            top: 45px;
            left: 45px;
            height: 10px;
            width: 89%;
            padding: 1px;
            float: left;
            border: 0px;
        }

        div.div6 {

            position: absolute;
            top: 230px;
            left: 120px;
            float: left;
            /*left: 100px;*/

        }

        #a1 {
            width: 10%;
            float: left;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: snow;
            font-weight: 900;
            /*text-shadow: 5px 5px 5px green;*/

        }

        #a12 {
            width: 10%;

            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: snow;
            font-weight: 900;
            /*text-shadow: 5px 5px 5px green;*/

        }

        #btn1 {
            width: 4%;
            background-color: green;
            display: inline;
            border-radius: 30px;

        }

        #btn2 {
            width: 10%;
            background-color: green;
            display: inline;
            float: right;
            border-radius: 30px

        }

        #btn4 {
            width: 111px;
            height: 43px;
            display: inline;
            float: right;
            border-radius: 50px;
            background-image: url("./images/btn4.png");

        }

        #btn3 {
            width: 10%;

            display: inline;
            float: right;
            border-radius: 30px;
            background-color: green;
        }

        #btn31 {
            width: 10%;

            display: inline;
            float: right;
            border-radius: 30px;
            background-color: green;
        }

        #btn5 {
            width: 10%;

            display: inline;
            float: right;
            border-radius: 30px
        }

        h3 {
            color: #900;
        }

        h1 {
            font-family: sans-serif;
            color: #3333FF;
            text-align: center;
        }

        .pp1 {
            color: snow;
            font-weight: 900;

        }

        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #customers td, #customers th {
            font-size: 1em;
            border: 1px solid #98bf21;
            padding: 3px 7px 2px 7px;
        }

        #customers th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }

        #customers tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }


    </style>
</head>
<body>

<div class="container">
    <div class="wrapper">
        <div class="heading">
            <div class="heading_nav">

                <div class="heading_img">
                    <center><img src="./images/Logo1.png"></center>
                </div>

            </div>
        </div>
        <div class="body">

            <div id="div" class="div">

                <p id="p1"><a id="a1">选择时间：</a><input type="text" id="text2" style="border:1px solid #999;"
                                                      onclick="J.calendar.get()" ;/>
                    <a id="a12">选择超市：</a> <input type="text" id="text1" onclick="btn1()"/>


                    <button id="btn2" onClick="btn2()"><p class="pp1"> 确定</p></button>
                </p>

                <div id="div1" class="div1" style="display:none">

                    <div id="div7" class="div7">

                    </div>
                    <table id="marketname">

                    </table>
                    <input type="hidden" id="hidden1">


                </div>
                <div id="dvbutn" class="dvbutn" style="display: none">
                    <button id="btn3" onclick="countChecked()"><p class="pp1">确定选择</p></button>
                    <button id="btn31" onclick="UnCheck()"><p class="pp1"> 清除</p></button>
                </div>
                <div id="div5" class="div5"><img src="./images/daohang11.png" id="daohang11"
                                                 style="height: 36px; width:100%"></div>
                <div id="div3" class="div3">


                    <table id="customers" class="table table-hover">
                        <div id="div81">
                            <tr>
                                <td style="width: 17%">无数据</td>
                                <td style="width: 35%">无数据</td>
                                <td style="width: 25%">无数据</td>
                                <td>无数据</td>
                            </tr>
                            <tr>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                            </tr>
                            <tr>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                            </tr>
                            <tr>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                            </tr>
                            <tr>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                                <td>无数据</td>
                            </tr>

                        </div>

                    </table>
                    <br>
                    <br>


                </div>
                <div id="div4" class="div4">
                    <button id="btn4" onClick="btn4()"></button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footing"> @ 青岛普恩特科技</div>

</div>


</body>
</html>
大毛儿
关注
专栏目录
2020年中青杯全国大学生数学建模竞赛题目【本科组】——纪念第一次训练模型！
weixin_43862765的博客
06-01 1万+
一、题目： B题（本科生组）：股指与国家经济 自1990年12月19日上海证券交易所挂牌成立，经过30年的快速发展，中国证券市场已经具有相当规模，在多方面取得了举世瞩目的成就，对国民经济的资源配置起着日益重要的作用。截至2019年年底，上海和深圳两个证券交易所交易的股票约4000种。目前，市场交易制度、信息披露制度和证券法规等配套制度体系已经建立起来，投资者日趋理性和成熟，机构投资者迅速发展已具规模，政府对证券市场交易和上市公司主体行为的监管已见成效。 随着近年来我国资本市场的发展和证券交易规模的不断
学c语言可以写什么程序练手,C语言/C++/Python练手小项目集合
weixin_42388716的博客
05-17 939
纪念我的第一篇博客，回头整理一下，自己当时真的是搞笑目录项目集合C语言1、推箱子2、超级简略版的飞机大战3、扫雷小游戏4、打字游戏5、链表贪吃蛇6、个人财务收支记录7、双人弹弹球C++1、植物大战僵尸2、俄罗斯方块3、2048Python1、爬取翻译2、外星人入侵地球游戏项目集合(C语言都是自己第一次发出来的，有点搞笑^……^)C语言和C++都是在vs2013上写的，python是在sublime...
经验分享 ：我的第一个机器学习项目
数据分析
01-08 412
作者：Austin Cheng 翻译：王紫岳 校对：和中华本文约4700字，建议阅读13分钟本文简要介绍了作者在初次进行机器学习的操作时所遇到到情况与得到的教训。机器学习之旅的开端在...
我的创作纪念日——创作第512天
kay_545
05-31 920
在项目中积累了许多宝贵的经验，希望通过分享来帮助其他同行。在一个实际项目中，我们需要实现一个高效的目标检测系统，以便在实时视频流中检测和分类不同的物体。经过调研和实验，我们选择了YOLOv5算法，它在速度和准确性之间达到了良好的平衡，非常适合我们的需求。：学习是一个持续的过程，记录下来的笔记不仅是对自己知识的整理，也能给其他人提供参考。：写作是一种很好的方式来进行技术交流，能够碰撞出更多的灵感火花。
纪念我的第一个完整的小说爬虫
weixin_33724570的博客
08-13 192
纪念我的第一个爬虫程序，一共写了三个白天，其中有两个上午没有看，中途遇到了各种奇怪的问题，伴随着他们的解决，对于一些基本的操作也弄清楚了。果然，对于这些东西的最号的学习方式，就是在使用中学习，通过解决问题的方式来搞定这些知识。按需索取，才能更有针对性。 大体记录下整个过程。 准备构思 出于对于python的热爱，想要尝试一些练手的项目，...
基于SSM框架的人事管理系统,前端采用EasyUI框架，第一个独立完成的项目，具有纪念意义.zip
08-20
【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发...
第一个完整点的小项目,前端html+css+js,后端Django,数据库MySQL,特此纪念.zip
08-21
【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发...
本项目是一个C++弹球游戏——纪念第一次C++大作业（用心蹭热度，用脚写代码）.zip
08-08
相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可以基于此项目进行扩展来开发出更多...
第一次学Java时完成的数独游戏作业~，留个纪念.zip
07-19
java课程设计大作业，java、算法练手项目，适合初学java、数据结构的同学拿来学习研究，基于java、GUI开发的小游戏，程序都经过测试，可以直接运行，资源含程序运行所需的源码、资源文件等全部数据，有需要的可放心...
前端用html写excel文件直接打开
全易
09-10 829
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 430
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
HTML、CSS实现树状图
p_s_p的博客
09-09 817
【代码】HTML、CSS实现树状图。
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1263
水平垂直居中的几种方法（总结）
HTML中的文字/分区标记/特殊符号
qq_74861982的博客
09-11 624
HTML中的文字与分区标记
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵
最新发布
m0_61118741的博客
09-14 1438
这个示例展示了如何结合民国风格和现代网页设计元素，创造一个既古典又炫酷的网页。通过细致的CSS样式和动画效果，我们实现了古典美学与现代技术的完美融合。这种设计不仅在视觉上吸引人，也在功能上提供了良好的用户体验。希望这个示例对你在网页设计方面有所启发！
requests-html的详细使用方法
2301_79698214的博客
09-11 483
requests-html是一个Python库，用于发送HTTP请求并解析HTML。它基于 requests 和 pyquery 库，提供了一种更简单和更方便的方式来获取和处理网页内容。以上是requests-html的一些常用使用方法，可以根据实际需求灵活使用。
《HTML 与 CSS—— 响应式设计》
weixin_47266126的博客
09-11 1143
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供良好的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 996
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
Java练手项目：搭建Windows与Linux测试环境
"本课程主要关注的是如何搭建一个测试环境，特别是针对Java项目的练手环境。课程内容包括在Windows和Linux系统下搭建测试环境，并提供了一个开源的JEECMS项目作为实战演练的基础。通过这个环境，学习者可以进行性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值