我的行事曆 | Programming Project | OrangeApple Learning Platform

{"id":71566,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"container\\\"\u003e\\n        \u003cdiv class=\\\"blue\\\"\u003e\\n            \u003ch1\u003e\u003c/h1\u003e\\n            \u003cspan class=\\\"next\\\"\u003enext\u003c/span\u003e\\n            \u003cspan class=\\\"prev\\\"\u003eprev\u003c/span\u003e\\n            \u003ctextarea\u003eＸＤＤＤ\u003c/textarea\u003e\\n        \u003c/div\u003e\\n        \u003cdiv id=\\\"box\\\"\u003e\u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #F77462;\\n    padding: 30px;\\n}\\n\\nh1 {\\n    margin: 0;\\n    text-align: center;\\n    text-shadow: 0px 0px 5px gray;\\n}\\n\\n.container {\\n    width: 350px;\\n    background-color: #fff;\\n    margin: auto;\\n    border-radius: 5px;\\n    overflow: hidden;\\n}\\n\\ntextarea {\\n    width: 100%;\\n    height: 50px;\\n    background-color: rgba(0, 0, 0, 0);\\n    border: 1px solid #ddd;\\n    color: #fff;\\n}\\n\\n#box {\\n    width: 350px;\\n}\\n\\n.blue {\\n    background-color: #6DC5DD;\\n    color: #fff;\\n    padding: 15px;\\n}\\n\\n.day {\\n    width: 50px;\\n    height: 50px;\\n    line-height: 50px;\\n    /* border: 1px solid #eee; */\\n    box-sizing: border-box;\\n    display: inline-block;\\n    text-align: center;\\n    font-size: 0.9rem;\\n    cursor: pointer;\\n}\\n\\n.day:hover {\\n    background-color: red;\\n    color: #fff;\\n}\\n\\n.red {\\n    /* background-color: red; */\\n    color: red;\\n}\\n\\n.fade {\\n    /* background-color: #ddd; */\\n    color: #aaa;\\n}\",\"js\":\"var days = [31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\\nvar weeks = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\\n\\nvar today = new Date;\\nvar year = today.getFullYear(); //西元年\\nvar month = today.getMonth(); //月份\\nvar date = today.getDate(); //日期\\n\\nrender(year, month, date);\\n\\nfunction render (year, month, date) {\\n    $('#box').empty();\\n    $('h1').text(`${year}/${month + 1}/${date}`);\\n    \\n    var d = `${year}/${month + 1}/${date}`;\\n    $('textarea').val(localStorage.getItem(d));\\n\\n    var day = (new Date(year, month, date)).getDay(); //星期\\n    var firstDay = (day - (date - 1))%7;\\n    if (firstDay \u003c 0) {\\n        firstDay += 7;\\n    }\\n    var lastDay = (day + (days[month] - date))%7;\\n    var prevMonth = month - 1;\\n    if (prevMonth \u003c 0) {\\n        prevMonth += 12;\\n    }\\n    var nextMonth = month + 1;\\n    if (nextMonth \u003e 11) {\\n        nextMonth -= 12;\\n    }\\n\\n    for (var i = 0; i \u003c 7; i++) {\\n        var box = $('\u003cdiv class=\\\"day\\\"\u003e\u003cdiv\u003e');\\n        box.text(weeks[i]);\\n        $('#box').append(box);\\n    }\\n    var m = days[prevMonth];\\n    for (var i = 0; i \u003c firstDay; i++) {\\n        var box = $('\u003cdiv class=\\\"day fade\\\"\u003e\u003cdiv\u003e');\\n        box.text(m - i);\\n        box.data('date', `${year}/${prevMonth + 1}/${m - 1}`);\\n        $('#box').append(box);\\n    }\\n    for (var i = 1; i \u003c= days[month]; i++) {\\n        var box = $('\u003cdiv class=\\\"day\\\"\u003e\u003cdiv\u003e');\\n        box.data('date', `${year}/${month + 1}/${i}`);\\n        box.text(i);\\n        $('#box').append(box);\\n        if (i == date) box.addClass('red');\\n    }\\n    for (var i = 0; i \u003c 6 - lastDay; i++) {\\n        var box = $('\u003cdiv class=\\\"day fade\\\"\u003e\u003cdiv\u003e');\\n        box.text(i + 1);\\n        box.data('date', `${year}/${nextMonth + 1}/${i + 1}`);\\n        $('#box').append(box);\\n    }\\n}\\n\\n$('.next').click(function () {\\n    month++;\\n    if (month \u003e= 12) {\\n        month = 0;\\n        year++;\\n    }\\n    render(year, month, date);\\n});\\n\\n$('#box').on('click', '.day', function () {\\n    var D = new Date($(this).data('date'));\\n    year = D.getFullYear(); //西元年\\n    month = D.getMonth(); //月份\\n    date = D.getDate(); //日期\\n    render(year, month, date);\\n});\\n\\n$('textarea').keyup(function (){\\n    var val = $(this).val();\\n    var d = `${year}/${month + 1}/${date}`;\\n    localStorage.setItem(d, val);\\n})\"}","created_at":"2019-06-04T11:41:11.334+08:00","updated_at":"2019-11-12T09:05:54.494+08:00","name":"我的行事曆","language":"web","screenshot":{"url":"/uploads/project/screenshot/71566/ba27ea020add65449bdab931127bea5d.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":494,"hashid":"6rps3gdv","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}