js实现随机头像聊天框无外链

QQ录屏20220811185812

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.wrapper {width: 420px;height: 550px;margin: 0 auto;border: 1px solid black;background-color: beige;background: url(img/1.jpeg);background-size: 100%;}#res {width: 380px;height: 470px;border: 1px solid grey;margin: 0 auto;margin-top: 10px;}input {width: 250px;height: 30px;margin-top: 10px;margin-left: 20px;}button {width: 80px;height: 30px;}img {width: 30px;height: 30px;}</style></head><body><div class="wrapper"><div id="res"></div><input type="text" name="" id="first" value="" /><button type="button" onclick="_second()">发送</button></div></body><script>var _first = document.getElementById("first");var _res = document.getElementById("res");var names = ['大娃:', '二娃:', '三娃:', '四娃:', '五娃:', '六娃:', '七娃:'];var imgs = ['img/11.jpeg', 'img/22.jpeg', 'img/33.jpg', 'img/44.jpeg', 'img/55.jpeg', 'img/66.jpeg', 'img/77.jpeg'];var x=1;function _second() {var index = Math.floor(Math.random() * 7);var i = Math.floor(Math.random() * 7); //随机的图片下标if(x%2==0){_res.innerHTML += `<div style="text-align:right;">${_first.value}${names[index]}<img src="${imgs[i]}"/><br></div>`;}else{_res.innerHTML += `<div style="text-align:left;"><img src="${imgs[i]}"/>${names[index]}${_first.value}<br></div>`;}x++;_first.value = "";}</script>
</html>

js实现随机头像聊天框无外链相关推荐

【CSS】492- 无外链的CSS开发策略
一.拜拜IE8,苹果香蕉大西瓜想想看现在都什么年代了,我家小朋友都已经会打酱油了,CSS中的一些开发策略也需要发生改变了. 如果你的项目不需要兼容IE8浏览器,则试试贯彻下面这条CSS开发策略. C ...
（Ⅲ）使用七牛云作为图床获取外链方式总结（已更换为使用PicGO+腾讯云COS）
1. 图床的选择 (1) 什么是图床? 很多技术人写作都有在用 Markdown 轻量级标记语言进行博客写作,这种写作让我们不用像使用 Word 那么麻烦调整排版和格式,而只需专心写作照样完成排版的一 ...
（Ⅲ）使用七牛云作为图床获取外链方式总结（已更换为使用PicGO+腾讯云COS）...
1. 图床的选择 (1) 什么是图床? 很多技术人写作都有在用 Markdown 轻量级标记语言进行博客写作,这种写作让我们不用像使用 Word 那么麻烦调整排版和格式,而只需专心写作照样完成排版的一 ...
网站外链有什么作用？如何做好外链建设
相信自己做网站的朋友们都知道网站外链的作用是非常有必要的.正如汕头SEO的大佬所说:拥有了外链你就拥有了整个互联网.今天小编就专门就外链进行写一篇文章.好了,扯完了那就回归正题吧.首先,我要问什么是外 ...
php判断外链,php检查字符串中是否有外链的方法
这篇文章主要介绍了php检查字符串中是否有外链的方法,涉及php针对字符串的正则匹配的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了php检查字符串中是否有外链的方法.分享给大家 ...
谷歌高质量外链怎么做？Google网站买英文外链可行吗？
谷歌高质量外链怎么做? 外链对Google搜索排名的重要性不必我多说,谷歌是对外链来进行页面排序的. 可外贸自建站如何布局高质量外链?有什么指标可以参考吗? 有的,请让我慢慢道来. 1.看域名的权重值 ...
记录配置微信外链跳转小程序踩坑（H5跳转小程序）
1.已有的小程序里面选择云开发,准备工作:下载官方demo 1.1新建云函数(参考:静态网站 H5 跳小程序 | 微信开放文档) 这个地方和官方操作一致,但是要特别注意如果设置了下图的话,云函数名称必 ...
外链专员所需要的基本要求
为什么80%的码农都做不了架构师?>>> 最近公司要招聘1-2个SEO外链专员,收到一些简历,不尽满意,毕竟这个行业在国内中真是凤毛麟角,理论知识知道,实战过的基本没有.以下是 ...
微信聊天框（html+css+js）实现
微信聊天框(html+css+js)实现 1.来源这是我在哔哩哔哩的上面的一个js网课的案例,说是有未添加js的版本(也就是只有样式的html),但我找不到,就只能自己写,比较丑. 主要是小图标,都 ...

js实现随机头像聊天框无外链

js实现随机头像聊天框无外链相关推荐

最新文章

热门文章