JS学习

Posted on 2023-12-02 17:01 迃幵^ 阅读(3) 评论(0) 编辑收藏举报

知识体系

案例整理

需求：包含日常任务处理、日志编写以及日期更新
所用知识点：
- 日期获取：
  var now = new Date();
  
  var year = now.getFullYear();
  
  var month = now.getMonth() + 1;
  
  var day = now.getDate();
- 时间更新：
  setInterval(updateTime, 1000);
- 自动表单验证：关键词 required
- 垂直导航栏
- 响应式布局：
  @media screen and (max-width: 600px)
- 不同状态下时改变链接
代码

<!DOCTYPE html>
<html lang="en">


<body>
    <div class="header">
        <span id="datetime" style="float: left;"></span>
        <span id="a"> 任务处理表</span>

    </div>
    <div class="row">
        <div class="column left">
            <ul>
                <li><a href="#" onclick="showContent('content1')">日计划</a></li> <br>
                <li><a href="#" onclick="showContent('content2')">兼职记录</a></li> <br>
                <li><a href="#" onclick="showContent('content3')">学习情况</a></li> <br>
            </ul>
        </div>
        <div class="column middle">
            <div id="div2">
                <div id="plan" style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: larger;">任务列表
                </div>
                <div class="title"
                    style="font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">
                    task
                    <button id="add" onclick="add222('')">新增</button>
                </div>

                <table id="table2" class="taskTable">
                </table>
                <div class="title">已完成</div>

                <table id="table3" class="taskTable">
                </table>
            </div>

        </div>
        <div class="column right">
            <form action="/demo/html/action_page.php" method="post"> 
                <label for="message">日志：</label>
                <br /><br />
                <textarea id="message" name="message" rows="10" cols="50" required></textarea>
                <input type="submit" value="保存" style="float: right;">
            </form>
        </div>

    </div>
   

</body>

</html>

CSS部分：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background-color: antiquewhite;
        }

        .header {
            padding: 40px;
            text-align: center;

        }

        #datetime {
            color: rgb(203, 196, 183);
            font-family: 'Times New Roman', Times, serif;
            font-size: 25px;
            text-shadow: 1px 1px 1px rgb(3, 0, 5);
            font-style: oblique;
        }

        #a {
            color: rgb(203, 196, 183);
            font-family: 'Times New Roman', Times, serif;
            font-size: 50px;
            text-shadow: 1px 1px 1px rgb(3, 0, 5);
            font-style: oblique;


        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            height: 100%;
            font-size: medium;
        }

        li a {
            display: block;
            color: #b06f19;
            padding: 8px 16px;
            text-decoration: none;
        }

        li a:hover {
            color: white;
        }

        #div2 {
            background-color: rgb(228, 213, 177);
            position: absolute;
            padding: 0;
                   }

        .title {
            margin: 20px 10px 20px 10px;
            text-align: left;
            display: flex;
            color: white;
            font-size: 25px;
            align-items: center;
        }
        #add {
            position: absolute;
            right: 30px;
            height: 30px;
        }

        #message {
            background-color: rgb(243, 218, 181)
        }
        th,
        td {
            text-align: center;
            padding: 8px;
            border: 1px solid rgb(155, 152, 144);
            border-radius: 5%;
        }

        .deleteButton {
            background-color: #ddd;
            border: none;
            color: red;
            padding: 4px 8px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            cursor: pointer;
        }
        .column {
            float: left;
            padding: 10px;
        }

        .column.left {
            width: 13%;
            background-color: rgb(107, 91, 82);

        }
        .column.middle {
            width: 44%;
            background-color: antiquewhite;
        }

        .column.right {
            width: 43%;
        }

        @media screen and (max-width: 600px) {

            .column.side,
            .column.middle {
                width: 100%;
            }
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>


</head>

JS部分：

<script>
        
        function getTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
            return year + '年' + month + '月' + day + '日 ' + ' ' + week;
        }
        function updateTime() {
            var datetimeElement = document.getElementById("datetime");
            datetimeElement.innerHTML = getTime();
        }
        setInterval(updateTime, 1000); 

        function add222(strContent) {
            var newRow = document.createElement('tr');
            var td1 = document.createElement('td');
            var radioBtn = document.createElement('input');
            radioBtn.className = "radioBtn";
            radioBtn.setAttribute('type', 'checkbox');
            radioBtn.setAttribute('name', 'option');
            radioBtn.setAttribute('value', 'option1');
            radioBtn.addEventListener('click', function (ele) {
                newRow.remove();
                if (radioBtn.checked) {
                    document.getElementById("table3").appendChild(newRow);
                } else {
                    document.getElementById("table2").appendChild(newRow);
                }

            });
            td1.appendChild(radioBtn);
            var editableCell = document.createElement('td');
            editableCell.className = "editableCell";
            editableCell.setAttribute('contenteditable', 'true');
            editableCell.setAttribute('width', '400');
            editableCell.innerHTML = strContent;
            var td2 = document.createElement('td');
            var deleteBtn = document.createElement('button');
            deleteBtn.className = "myRowClass";
            deleteBtn.innerHTML = '删除';
            deleteBtn.classList.add('deleteButton');
            td2.appendChild(deleteBtn);
            deleteBtn.addEventListener('click', function () {
                newRow.remove();
            });
            newRow.className = "newRow";
            newRow.appendChild(td1);
            newRow.appendChild(editableCell);
            newRow.appendChild(td2);
            document.getElementById("table2").appendChild(newRow);
        }

        function addF(strContent) {
            var newRow = document.createElement('tr');
            var td1 = document.createElement('td');
            var radioBtn = document.createElement('input');
            radioBtn.className = "radioBtn";
            radioBtn.setAttribute('type', 'checkbox');
            radioBtn.setAttribute('name', 'option');
            radioBtn.checked = true;
            radioBtn.addEventListener('click', function (ele) {
                newRow.remove();
                if (radioBtn.checked) {
                    document.getElementById("table3").appendChild(newRow);
                } else {
                    document.getElementById("table2").appendChild(newRow);
                }

            });
            td1.appendChild(radioBtn);
            var editableCell = document.createElement('td');
            editableCell.className = "editableCell";
            editableCell.setAttribute('contenteditable', 'true');
            editableCell.setAttribute('width', '400');
            editableCell.innerHTML = strContent;
            var td2 = document.createElement('td');
            var deleteBtn = document.createElement('button');
            deleteBtn.className = "myRowClass";
            deleteBtn.innerHTML = '删除';
            deleteBtn.classList.add('deleteButton');
            td2.appendChild(deleteBtn);
            deleteBtn.addEventListener('click', function () {
                newRow.remove();
            });
            newRow.className = "newRow";
            newRow.appendChild(td1);
            newRow.appendChild(editableCell);
            newRow.appendChild(td2);
            document.getElementById("table3").appendChild(newRow);
        }


        function delete222(ele) {
            ele.parentElement.parentElement.remove();
        }
        add222(" ");
        add222(" ");
        add222(" ");
        add222(" ");
        add222(" ");
    </script>

效果图

会员力量，点亮园子希望

刷新页面返回顶部

sxr0316

公告

JS学习