代碼地址如下：
http://www.demodashi.com/demo/12539.html

一、運行

• 項目依賴node環境和mongodb，請先下載安裝好以上兩個環境。
• 雙擊/server/core/run.bat文件即可啟動服務器。
• 打開谷歌瀏覽器輸入http://127.0.0.1:8080 即可使用

二、演示效果

三、項目文件結構

四、代碼實現過程

由于代碼量較大，這里只拿出部分來介紹。

1、獲取驗證碼的代碼

_getCode(){this.app.get('/getCode', (req, res) => {let email = req.query.email;let code = '';for(let i = 0; i < 5; i++){code += Math.floor(Math.random() * 10);}let queryData = {email: email};let updateData = {code: code};let callback = (db) => {let collection = db.collection(this.userCollection);collection.updateOne(queryData, {$set: updateData}, (err, result) => {assert.equal(null, err);db.close();if(result.result.n === 1){new Email(email, '重置密碼', '你的驗證碼是：' + code);this._removeCode(email);res.send({status: 'success', text: '驗證碼已發往你的郵箱，請查收。30分鐘內有效。'});}else{res.send({status: 'error', text: '沒有此郵箱，或許你需要注冊賬號。'});}});};new MongoDB(this.currentDB, callback);}); }

2、拖動功能

define([], function() {'use strict';class Draggable {constructor($container) {this.$container = $container;for (let subContainer of $container.children()) {this._handleEvents($(subContainer));}}_handleEvents($subContainer) {$subContainer.on('mousedown', (e) => {if (!$(e.target).hasClass('button')) {this._handleMousedown(e);}});$(document).on('mousemove', (e) => {if (!$(e.target).hasClass('button')) {this._handleMousemove(e);}});$(document).on('mouseup', (e) => {if (!$(e.target).hasClass('button')) {this._handleMouseup(e);}});}_handleMousedown(e) {let {left, top} = this.$container.css(['left', 'top']);this.offsetX = this._parseStr(left) - e.clientX;this.offsetY = this._parseStr(top) - e.clientY;this.mouseDown = true;}_handleMousemove(e) {$(e.target).css('cursor', 'url(/images/m1.cur),default !important');if (this.mouseDown) {let x = e.clientX;let y = e.clientY;let positionX = x + this.offsetX;let positionY = y + this.offsetY;this.$container.css({left: positionX,top: positionY,});}}_handleMouseup(e) {$(e.target).css('cursor', 'url(/images/m1.cur),default !important');this.mouseDown = false;}_parseStr(str) {if(typeof str !== 'string'){str += ''; }return Number(str.split('px')[0]);}}return Draggable; });

3、點擊雨滴效果的代碼

define([], function() {'use strict';class Rain {constructor() {this.settings = {width: 10,height: 10,borderColor: '#c6cac9',opacity: 0.7,borderRadius: 5,borderWidth: 5,maxWidth: 70,widthOffset: 2,radiusOffset: 1,opacityOffset: 0.05,borderOffset: 1,position: 'fixed',zIndex: 100,borderStyle: 'solid',class: 'rain',};this._handleEvents();}_handleEvents() {let settings = this.settings;$(document).on('click', (e) => {if($(e.target).hasClass('button')){return;}let $rain = $('<div>').attr('class', settings.class).css({position: settings.position,zIndex: settings.zIndex,borderStyle: settings.borderStyle,});$('body').append($rain);let x = e.clientX;let y = e.clientY;this._initRain($rain, x, y);this._updateRain($rain, x, y);});}_updateRain($rain, x, y) {let settings = this.settings;let rainThread = setInterval( () => {let {width, height,top, left, opacity, borderWidth, borderRadius} = $rain.css(['width', 'height','top', 'left', 'opacity', 'borderWidth', 'borderRadius']);$rain.css({width: this._parseStr(width) + settings.widthOffset,height: this._parseStr(height) + settings.widthOffset,top: y - this._parseStr(height) / 2,left: x - this._parseStr(width) / 2,opacity: this._parseStr(opacity) - settings.opacityOffset,borderWidth: this._parseStr(borderWidth) + settings.borderOffset,borderRadius: this._parseStr(borderRadius) + settings.radiusOffset,});if (this._parseStr(width) > settings.maxWidth) {clearInterval(rainThread);$rain.remove();}}, 10);}_initRain($rain, x, y) {let settings = this.settings;$rain.css({width: settings.width,height: settings.height,borderColor: settings.borderColor,opacity: settings.opacity,borderRadius: settings.borderRadius,borderWidth: settings.borderWidth,top: y - this._parseStr(settings.height) / 2,left: x - this._parseStr(settings.width) / 2,});}_parseStr(str){if(typeof str !== 'string'){str += ''; }return Number(str.split('px')[0]);}}return Rain; });

五、其他說明

暫沒

網頁聊天軟件

代碼地址如下：
http://www.demodashi.com/demo/12539.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權

總結

以上是生活随笔為你收集整理的网页聊天软件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。