多人聊天室（預設版）副本 | 程式專案

{"id":142085,"student_id":3647,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003ecrazyman的聊天室\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    \u003cimg src=\\\"https://i.pinimg.com/236x/88/a2/44/88a244f02ab3663789be9109b1152321--sans-papyrus-soul.jpg\\\"\u003e\\n    \\n    \u003cimg src=\\\"https://a.wattpad.com/cover/80390736-352-k194351.jpg\\\"\u003e\\n    \\n    \u003cimg src=\\\"https://media1.tenor.com/images/44b71ea906a66c138360e0758d20ad4b/tenor.gif?itemid=11094845\\\"\u003e\\n    \u003cimg src=\\\"https://mfiles.alphacoders.com/829/thumb-829975.jpg\\\"\u003e\\n    \u003cdiv id=\\\"chatbox\\\"\u003e\\n       \\n    \u003c/div\u003e\\n    \u003cinput id=\\\"input\\\" type=\\\"text\\\" placeholder=\\\"說些什麼...\\\"\u003e\\n   \\n    \u003cimg src=\\\"https://www.pngitem.com/pimgs/m/114-1144757_transparent-sans-clipart-undertale-sans-hd-png-download.png\\\"\u003e\\n    \\n\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\"body {\\n    padding: 30px;\\n    background-color: #000000;\\n    font-family: Monospace;\\n}\\n\\n#chatbox {\\n    height: 400px;\\n    padding: 5px;\\n    border: 5px solid #bbbbbb;\\n    overflow-y: scroll;\\n}\\n\\n#chatbox \u003e p {\\n    margin: 0;\\n    color: blue;\\n    font-size: 1rem;\\n}\\n\\ninput {\\n    width: 100%;\\n    padding: 10px 10px;\\n    border: 1px solid #bbbbbb;\\n    border-top-width: 0;\\n    box-sizing: border-box;\\n    color: black;\\n    background-color: #222222;\\n    outline: none;\\n    font-family: Monospace;\\n    font-size: 1rem;\\n}\",\"js\":\"var name = prompt(\\\"請輸入你的名字🙂😋🙂\\\");\\nvar text='加入聊天室😋😎😍🤩😃';\\nvar time= new Date();\\nvar r= Math.random()*255;\\nvar g= Math.random()*255;\\nvar b= Math.random()*255;\\nvar color = `rgb(${r}, ${g}, ${b})`;\\ntime=time.toLocaleTimeString();\\n$(\\\"#input\\\").keypress(keypress);\\nappendComment(text, name, time, color);\\nsocket.emit(\\\"a\\\",[text, name, time, color]);\\nsocket.on(\\\"a\\\",onMessage);\\n// 將訊息資料新增到畫面上\\nfunction appendComment (text, name, time, color) {\\nvar html=`\u003cp style=\\\"color: rgb(${r}, ${g}, ${b} );\\\"\u003e\\n            【${name} ${time}】:${text};\\n        \u003c/p\u003e`;\\n        $(\\\"#chatbox\\\").append(html);\\n        var height=$(\\\"#chatbox\\\").prop(\\\"scrollHeight\\\");\\n        $(\\\"#chatbox\\\").scrollTop(height);\\n    \\n}\\n\\n// 當輸入框按下 enter 按鍵時，廣播訊息給其他在線使用者\\nfunction keypress(e) {\\n    var text=$(\\\"#input\\\").val();\\n    var time= new Date();\\n    time=time.toLocaleTimeString();\\nif(e.keyCode==13\u0026\u0026text!==\\\"\\\"){\\n    appendComment(text, name, time, color);\\n    $(\\\"#input\\\").val(\\\"\\\");\\n    socket.emit(\\\"a\\\",[text, name, time, color]);\\n}\\n}\\n\\n// 當接收到訊息資料時，將資料新增到介面上\\nfunction onMessage(data) {\\nappendComment(data[0],data[1],data[2],data[3]);\\n}\"}","created_at":"2020-04-18T18:35:41.045+08:00","updated_at":"2020-04-18T20:03:11.044+08:00","name":"多人聊天室（預設版） 副本","language":"web","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/142085/7ecbac6e249bb7575fe640ec5046436a.jpg"},"parent_id":129612,"plugin":"socket = {\n    on: DB.onMessage.bind(DB),\n    emit:DB.broadcast.bind(DB)\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":93,"hashid":"6rpsg3qm","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}