當(dāng)前位置：首頁(yè) > news >正文

撫州市建設(shè)局網(wǎng)站桂林最新消息今天

news 2025/7/11 10:31:45

撫州市建設(shè)局網(wǎng)站,桂林最新消息今天,wordpress 國(guó)內(nèi) 主題,怎么用vs2017做網(wǎng)站簡(jiǎn)介微信對(duì)話生成器，是一款在線微信聊天對(duì)話制作的工具，它可以設(shè)置蘋(píng)果或安卓狀態(tài)欄，包括手機(jī)電量、手機(jī)時(shí)間等，還可以設(shè)置不同用戶的角色，然后發(fā)送文字、語(yǔ)音、紅包、轉(zhuǎn)賬等多種好玩的功能，可謂是一款?yuàn)蕵?lè)…

簡(jiǎn)介

微信對(duì)話生成器，是一款在線微信聊天對(duì)話制作的工具，它可以設(shè)置蘋(píng)果或安卓狀態(tài)欄，包括手機(jī)電量、手機(jī)時(shí)間等，還可以設(shè)置不同用戶的角色，然后發(fā)送文字、語(yǔ)音、紅包、轉(zhuǎn)賬等多種好玩的功能，可謂是一款?yuàn)蕵?lè)制作神器。

此項(xiàng)目是由HTML\CSS\JS純前端代碼實(shí)現(xiàn)的在線web功能小網(wǎng)站。

此軟件只用于娛樂(lè)使用，切勿用于非法途徑，由此產(chǎn)生任何糾紛由使用者本人自己承擔(dān)，禁止用于各種違法犯罪行為！！

項(xiàng)目結(jié)構(gòu)

js文件夾是游戲事件控制文件

images 文件夾是圖片文件

css 文件夾是網(wǎng)頁(yè)樣式文件

fonts 文件夾是網(wǎng)頁(yè)文字字體文件

favicon.png 是網(wǎng)頁(yè)游戲圖標(biāo)

index.html 是主頁(yè)面

代碼展示

整個(gè)項(xiàng)目只有一個(gè)html文件，index.html代碼如下：

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>在線微信對(duì)話生成器 - 泰山</title><meta name="keywords" content="免費(fèi)在線微信對(duì)話生成器" /><meta name="description" content="在線微信對(duì)話生成器是一款在線微信聊天對(duì)話制作的工具" /><meta name="render" content="webkit"><link rel="icon" href="favicon.png"><meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"><meta content="telephone=no, address=no" name="format-detection"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><script type="text/javascript">var _path = { images: 'static/app/images' }var page = { data: {} }</script><link rel="stylesheet" href="static/app/css/zui.min.css"><link rel="stylesheet" href="static/app/css/app.css"><link rel="stylesheet" href="static/app/css/jquery.range.css"><link rel="stylesheet" href="static/app/css/wallet.css"><script type="text/javascript" src="static/app/js/common.bundle.js"></script><script type="text/javascript" src="static/app/js/chat.bundle.js"></script>
</head>
<body><div id="vueApp" class="wrapper"><div class="container-fluid page-content"><div id="pageHeader">微信對(duì)話生成器</div><div class="edit-content"><div class="tab"><ul class="nav nav-tabs"><li class="active"><a data-tab href="#tabContent1">外觀設(shè)置</a></li><li><a data-tab href="#tabContent2">對(duì)話設(shè)置</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tabContent1"><!-- 外觀設(shè)置 --><div class="view-setting"><div class="view-set-item"><span>手機(jī)信號(hào)：</span><select v-model="phone.single" class="form-control"><option value="1">1格</option><option value="2">2格</option><option value="3">3格</option><option value="4" selected="selected">4格</option></select></div><div class="view-set-item"><span>網(wǎng)絡(luò)信號(hào)：</span><select v-model="phone.wifi" class="form-control"><option value="1">wifi</option><option value="2">3G</option><option value="3">4G</option><option value="4">5G</option></select></div><div class="view-set-item"><span>wifi信號(hào)：</span><select v-model="phone.wifi_single" class="form-control"><option value="1">1格</option><option value="2">2格</option><option value="3" selected="selected">3格</option></select></div><div class="view-set-item"><span>手機(jī)時(shí)間：</span><select v-model="phone.time_hour" class="form-control edit-phone-time-hour"></select><select v-model="phone.time_mini" class="form-control edit-phone-time-mini"></select></div><div class="view-set-item"><span>充電中：</span><label class="my-radio"><input type="radio" name="charge"v-model="phone.battery_charge" value="1"> 是</label><label class="my-radio"><input type="radio" name="charge"v-model="phone.battery_charge" value="0" checked> 否</label></div><div class="view-set-item"><span>手機(jī)電量：</span><input @change="onBatteryChange($event)" type="range" v-model="phone.battery_amount"min="0" max="100" value="50" />&nbsp;&nbsp;&nbsp;{{phone.battery_amount}}%</div><div class="view-set-item"><span>聽(tīng)筒模式：</span><label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="1"> 是</label><label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="0" checked> 否</label></div><div class="view-set-item"><span>消息數(shù)目：</span><input type="number" name="phone-msg-count" class="form-control" v-model.number="setting.message"></div><div class="view-set-item"><span>聊天標(biāo)題：</span><input type="text" class="form-control" v-model="setting.title"></div><div class="view-set-item"><span>語(yǔ)音模式：</span><label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="1"> 是</label><label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="0" checked> 否</label></div><div class="view-set-item"><span>聊天背景：</span><a class="a-phone-set-bg" href="javascript:;" title="選擇背景圖"><font>+</font><img class="img-phone-set-bg" :src="setting.background" /><input @change="setBackground($event)" type="file" /><span @click="deleteBackground" v-if="setting.background != ''">x</span></a></div></div></div><!-- 對(duì)話設(shè)置 --><div class="tab-pane" id="tabContent2"><div class="dialog-user"><div class="dialog-user-title">編輯和選擇用戶（<font>第一個(gè)用戶默認(rèn)是自己，點(diǎn)擊圖像可更換</font>）</div><div class="dialog-user-items"><div class="dialog-user-item el-remove"><div class="dialog-user-face"><a class="dialog-user-face-a" href="javascript:;"><input type="file" placeholder="點(diǎn)擊更換頭像"><i></i></a><input type="text" value="微信對(duì)話生成器" /><a class="dialog-user-select">選擇用戶</a><a class="dialog-user-delete">x</a></div></div><div class="dialog-user-item el-remove"><div class="dialog-user-face"><a class="dialog-user-face-a" href="javascript:;"><input type="file" placeholder="點(diǎn)擊更換頭像"><i></i></a><input type="text" value="馬先生" /><a class="dialog-user-select">選擇用戶</a><a class="dialog-user-delete">x</a></div></div><div v-for="(user, index) in users" class="dialog-user-item"><div class="dialog-user-face"><a class="dialog-user-face-a" href="javascript:;"><input @change="setUserImage($event, index)" type="file"placeholder="點(diǎn)擊更換頭像"><i :style="'background-image: url(' + user.image + ')'"></i></a><input type="text" v-model="user.name" /><a @click="selectUser(index)":class="['dialog-user-select', {'dialog-user-selected':user.selected}]">選擇用戶</a><a v-if="!user.is_me" @click="delUser(index)" class="dialog-user-delete"title="刪除用戶">x</a></div></div><div class="dialog-user-item"><a @click="addUser" class="dialog-user-item-add" href="javascript:;"title="添加用戶">+</a></div></div><div class="dialog-user-content-title">發(fā)送人：{{getSender()}}</div><div class="dialog-user-content"><div class="dialog-user-content-panel"><textarea v-model="setting.dialog_content"class="edit-dialog-text form-control"></textarea></div><div class="view-setting view-setting2"><div class="view-set-item"><span>紅包或轉(zhuǎn)賬金額：</span><input v-model.number="setting.dialog_money" type="number"class="form-control"></div><div class="view-set-item"><span>添加聊天時(shí)間：</span><select v-model="setting.date_year"class="form-control edit-phone-time-year"><option value="">-</option></select><select v-model="setting.date_month"class="form-control edit-phone-time-month" style="width: 60px;"><option value="">-</option></select><select v-model="setting.date_day" class="form-control edit-phone-time-day"style="width: 60px;"><option value="">-</option></select><select v-model="setting.date_xinqi" class="form-control"><option value="">-</option><option value="星期一">星期一</option><option value="星期二">星期二</option><option value="星期三">星期三</option><option value="星期四">星期四</option><option value="星期五">星期五</option><option value="星期六">星期六</option><option value="星期日">星期日</option></select><select v-model="setting.date_shiduan" class="form-control"style="width: 60px;"><option value="">-</option><option value="上午">上午</option><option value="下午">下午</option><option value="凌晨">凌晨</option></select><select v-model="setting.date_hour"class="form-control edit-phone-time-hour" style="width: 60px;"></select>：<select v-model="setting.date_min" class="form-control edit-phone-time-mini"style="width: 60px;"></select></div><div class="view-set-item"><span>語(yǔ)音時(shí)間：</span><input v-model.number="setting.dialog_voice" type="number"class="form-control">&nbsp;&nbsp;&nbsp;<label>是否已讀：</label><label class="my-radio"><input type="radio"v-model="setting.dialog_voice_isread" value="1" checked>是</label><label class="my-radio"><input type="radio"v-model="setting.dialog_voice_isread" value="0"> 否</label></div><div class="view-set-item"><span>紅包備注：</span><input v-model="setting.dialog_repacket_remark" type="text"class="form-control"></div><div class="view-set-item"><span>轉(zhuǎn)賬備注：</span><input v-model="setting.dialog_trans_remark" type="text"class="form-control"></div></div><div class="btn-groups"><div class="btn-group"><button @click="addTextDialog" class="btn btn-success">添加文字對(duì)話</button><button @click="addNoticeDialog" class="btn btn-primary">添加時(shí)間</button><button class="btn btn-primary btn-send-image">添加圖片對(duì)話<input@change="addImageDialog($event)" type="file"></button></div><div class="btn-group"><button @click="addVoiceDialog" class="btn btn-primary">添加語(yǔ)音對(duì)話</button><button @click="addRedpacketDialog" class="btn btn-primary">添加紅包對(duì)話</button><button @click="addTransferDialog" class="btn btn-primary">添加轉(zhuǎn)賬對(duì)話</button></div></div><button class="btn-clear" @click="cleanDialogs" href="javascript:;">清空聊天內(nèi)容</button></div></div></div></div></div><!-- phone --><div class="phone-wrap"><div class="phone-content"><div id="phone" class="phone"><div class="phone-top"><div class="phone-bar"><div class="phone-time">{{phone.time_hour}}:{{phone.time_mini}}</div><div:class="['phone-sigle', {'phone-sigle-v1':phone.single == 1}, {'phone-sigle-v2':phone.single == 2}, {'phone-sigle-v3':phone.single == 3}, {'phone-sigle-v4':phone.single == 4}]">信號(hào)</div><div:class="['phone-wifi', {'phone-wifi-v2':phone.wifi > 1}, phone.wifi == 1 ? 'phone-wifi-s' + phone.wifi_single : '']"><template v-if="phone.wifi == 1">wifi</template><template v-else-if="phone.wifi == 2">3G</template><template v-else-if="phone.wifi == 3">4G</template><template v-else-if="phone.wifi == 4">5G</template></div><div :class="['phone-battery', {'phone-battery-charge':phone.battery_charge == 1}]"><span><font :style="[{width: phone.battery_amount + '%'}]">電量</font><i></i></span></div></div><div class="phone-nav"><div class="phone-nav-left"><div class="phone-nav-back">返回</div><span v-if="setting.message && setting.message > 0">{{setting.message}}</span></div><div class="phone-nav-center"><span><font>{{setting.title}}</font><i v-if="phone.ear == 1"></i></span></div><div class="phone-nav-right"><div class="phone-nav-more">更多</div></div></div></div><div class="phone-bg"><img @load="onBackgroundLoad($event)" :src="setting.background" /></div><div class="phone-water"></div><div class="phone-body"><div class="wechat-content"><template v-for="(dialog, index) in dialogs"><div :class="['wechat-dialog', {'wechat-dialog-right':dialog.is_me}]"><div v-if="dialog.type != 'notice'" class="wechat-dialog-face"><img :src="getUserById(dialog.user_id).image" /></div><template v-if="dialog.type == 'text'"><div class="wechat-dialog-text">{{dialog.content}}</div></template><template v-if="dialog.type == 'image'"><div:class="['wechat-dialog-text', 'wechat-dialog-image', {'wechat-dialog-image-noborder':setting.background != ''}]"><img :src="dialog.image"></div></template><template v-if="dialog.type == 'voice'"><div class="wechat-dialog-text wechat-dialog-voice"><div v-if="dialog.is_me":style="{width: getVoiceLength(dialog.time) + 'px'}"></div><span v-if="dialog.is_me">{{dialog.time}}"</span><i></i><span v-if="!dialog.is_me">{{dialog.time}}"</span><div v-if="!dialog.is_me":style="{width: getVoiceLength(dialog.time) + 'px'}"></div><em v-if="!dialog.is_me && dialog.isread == '0'"></em></div></template><template v-if="dialog.type == 'notice'"><div class="wechat-dialog-notice"><span:class="[{'wechat-dialog-notice-has-bg':setting.background != ''},{'wechat-dialog-notice-system':dialog.is_system}]"v-html="dialog.content"></span></div></template><template v-if="dialog.type == 'transfer' || dialog.type == 'redpacket'"><div:class="['wechat-dialog-text', 'wechat-dialog-trans', {'wechat-dialog-trans-get':dialog.is_get}]"><div:class="['wechat-dialog-trans-content', {'wechat-dialog-redp-content':dialog.type == 'redpacket'}]"><i></i><div><spanv-if="dialog.type == 'transfer'">￥{{moneyFormat(dialog.money,2, '', false)}}</span><font v-if="dialog.type == 'transfer'">{{dialog.remark}}</font><spanv-if="dialog.type == 'redpacket'">{{dialog.remark}}</span><font v-if="dialog.type == 'redpacket' && dialog.is_get">已領(lǐng)取</font></div></div><div class="wechat-dialog-trans-bottom"><span v-if="dialog.type == 'transfer'">微信轉(zhuǎn)賬</span><span v-if="dialog.type == 'redpacket'">微信紅包</span></div></div></template><a @click="deleteDialog(index)" class="a-wechat-dialog-del"href="javascript:;" title="刪除對(duì)話">X</a><div v-if="!dialog.is_get && dialog.type == 'redpacket'"class="a-wechat-dialog-menu"><a @click="redpacketGet(index)">領(lǐng)取</a></div><div v-if="!dialog.is_get && dialog.type == 'transfer'"class="a-wechat-dialog-menu"><a @click="transferGet(index)">領(lǐng)取</a></div></div></template></div></div><div class="phone-bottom"><div class="phone-bottom-chat"><div class="wechat-bottom"><div:class="['wechat-bottom-icon', 'wechat-voice-icon', {'wechat-voice-say-icon':setting.voice == 1}]">語(yǔ)音</div><div :class="['wechat-input', {'wechat-input-say':setting.voice == 1}]"><template v-if="setting.voice == 1">按住 說(shuō)話</template><template v-else>輸入框</template></div><div class="wechat-bottom-icon wechat-emoji-icon">表情</div><div class="wechat-bottom-icon wechat-more-icon">更多功能</div></div></div><div class="phone-bottom-bar"><i>返回桌面</i></div></div></div></div></div></div></div></div>
</body></html>

wallet.css 網(wǎng)頁(yè)程序樣式控制（其他文件代碼太多，粘貼后直接卡死，不過(guò)多展示）

.wallet .wallet-list {display: flex;flex-direction: row;
}
.wallet .wallet-list .list-item {flex: 1;text-align: center;
}
.wallet .wallet-list .item-logo {width: 60px;height: 60px;
}
.wallet .wallet-list .item-name {font-size: 14px;
}
.wallet .wallet-service {margin: 15px 0;font-size: 16px;
}
.wallet .wallet-service span {color: red;
}