多人聊天室 (1) | Programming Project | OrangeApple Learning Platform

{"id":68978,"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\u003e\u003c/div\u003e\\n    \u003cinput type=\\\"text\\\" placeholder=\\\"說些什麼...\\\"\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: black;\\n    padding: 30px;\\n}\\n\\ndiv {\\n    padding: 5px;\\n    height: 400px;\\n    margin: auto;\\n    overflow-y: scroll;\\n    border: 1px solid #ddd;\\n}\\n\\ninput {\\n    width: 100%;\\n    padding: 5px;\\n    box-sizing: border-box;\\n    border: 1px solid #ddd;\\n    font-size: 16px;\\n}\\n\\np {\\n    margin: 0;\\n}\",\"js\":\"var name = prompt('name?') || '匿名';\\nvar text = '加入聊天室';\\nvar r = Math.random()*255;\\nvar g = Math.random()*255;\\nvar b = Math.random()*255;\\nvar color = `rgb(${r}, ${g}, ${b})`;\\nvar time = (new Date).toLocaleTimeString();\\n\\nappendComment(name, text, time, color);\\nsocket.emit('message', {\\n    text: text,\\n    time: time,\\n    name: name,\\n    color: color,\\n});\\n\\nsocket.on('message', function (data) {\\n    appendComment(data.name, data.text, data.time, data.color);\\n});\\n\\n$('input').keyup(function (e) {\\n    if (e.keyCode == 13) {\\n        sendComment();\\n    }\\n});\\n\\nfunction sendComment () {\\n    var text = $('input').val();\\n    var time = (new Date).toLocaleTimeString();\\n    $('input').val('');\\n\\n    appendComment(name, text, time, color);\\n    socket.emit('message', {\\n        text: text,\\n        time: time,\\n        name: name,\\n        color: color,\\n    });\\n}\\n\\nfunction appendComment (name, text, time, color) {\\n    var html = `\u003cp\u003e【${name} ${time}】${text}\u003c/p\u003e`;\\n    var el = $(html);\\n    el.css('color', color);\\n    $('div').append(el);\\n}\"}","created_at":"2019-05-23T10:57:31.143+08:00","updated_at":"2019-11-01T19:58:38.729+08:00","name":"多人聊天室 (1)","language":"web","screenshot":{"url":"/uploads/project/screenshot/68978/a259bce799f595deeeb42d7c6aa96f16.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":503,"hashid":"d5msg32p","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}