目录
抽名字（抽奖）搜索下拉菜单微博文本框进阶微博案例抽名字（抽奖）
实现效果是：点击开始按钮，则方框不断显示名字，点击停止，抽到的人名就是谁，并且删除，继续直到抽完后禁用按钮
①点击开始按钮随机抽取数组的一个数据,放到页面中
②点击结束按钮删除数组当前抽取的一个数据
③当抽取到最后一个数据的时候，两个按钮同时禁用核心:利用定时器快速展示，停止定时器结束展示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 350px;height: 40px;border: solid 5px green;text-align: center;line-height: 40px;}</style></head><body><div class="show">点击开始点名</div><button class="start">开始</button><button class="end">结束</button><script>let arr = ["赵","钱","孙","李","周","吴","郑","王"]function ranDom(min, max){number = Math.floor(Math.random() * (max - min + 1)) + minreturn number}//获取选择器元素let show = document.querySelector(".show")let start = document.querySelector(".start")let end = document.querySelector(".end")//定义全局变量let timer = 0let random = 0//点击事件//点击开始，div不停的显示arr中的名字start.addEventListener("click", function() {//不停的显示,需要用到定时器timer = setInterval(function(){//获取随机数random = ranDom(0, arr.length-1)show.innerHTML = arr[random]}, 25)//如果到了最后一个按钮就禁用两个按钮，不再抽if(arr.length === 1){start.disabled = trueend.disabled = true}})end.addEventListener("click", function(){//停止定时器clearInterval(timer)//删除当前暂停的这个arr.splice(random, 1)})</script></body></html>
搜索下拉菜单
展示效果
①：开始下拉菜单要进行隐藏
②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
③：表单失去焦点，反向操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;transition: all .3s;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>// 1. 获取元素 input let search = document.querySelector('input')let list = document.querySelector('.result-list')// 2. 事件监听 获得光标事件 focussearch.addEventListener('focus', function () {// 显示下拉菜单list.style.display = 'block'// 文本框变色this.classList.add('search')})// 3. 事件监听 失去光标事件 blursearch.addEventListener('blur', function () {// 隐藏下拉菜单list.style.display = 'none'// 文本框去色this.classList.remove('search')})</script></body></html>
微博文本框
①：判断用输入事件 input
②：不断取得文本框里面的字符长度
③：把获得数字给下面文本框
注意是：文本框最长的属性maxlength，获取的文本框值的长度textarea .value .length
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/weibo.css"><style>* {margin: 0;padding: 0;}ul {list-style: none;}.w {width: 900px;margin:0 auto;}.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline:none;padding-left: 20px;padding-top:10px;font-size: 18px;}.controls {overflow: hidden;}.controls div {float: right;}.controls div span {color:#666;}.controls div .useCount {color:red;}.controls div button {width: 100px;outline: none;border:none;background: rgb(0, 132, 255);height: 30px;cursor: pointer;color:#fff;font:bold 14px '宋体';transition: all 0.5s;}.controls div button:hover {background: rgb(0, 225, 255);}.controls div button:disabled {background: rgba(0, 225, 255,0.5);}.contentList {margin-top:50px;}.contentList li {padding: 20px 0;border-bottom: 1px dashed #ccc;}.contentList li .info {position: relative;}.contentList li .info span {position: absolute;top:15px;left:100px;font:bold 16px '宋体';}.contentList li .info p {position: absolute;top:40px;left: 100px;color:#aaa;font-size: 12px;}.contentList img {width: 80px;border-radius: 50%;}.contentList li .content {padding-left: 100px;color: #666;word-break: break-all;}</style></head><body><div class="w"><div class="controls"><img src="images/tip.png" alt=""><br><textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea><div><span class="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><div class="contentList"><ul></ul></div></div><script>// 1. 获取元素 文本域 countlet area = document.querySelector('#area')let useCount = document.querySelector('.useCount')// 2. 绑定事件 用户输入事件 inputarea.addEventListener('input', function () {// console.log('测试中')// 不断得到文本域里面的字符长度// area.value 可以得到的值// console.log(area.value)// area.value.length 得到输入字符的长度// console.log(area.value.length)useCount.innerHTML = area.value.length})</script></body></html>
进阶微博案例
需要keyup事件，而不是按下keydown就事件，这样还留个回车
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>微博发布</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.w {width: 900px;margin: 0 auto;}.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline: none;padding-left: 20px;padding-top: 10px;font-size: 18px;}.controls {overflow: hidden;}.controls div {float: right;}.controls div span {color: #666;}.controls div .useCount {color: red;}.controls div button {width: 100px;outline: none;border: none;background: rgb(0, 132, 255);height: 30px;cursor: pointer;color: #fff;font: bold 14px '宋体';transition: all 0.5s;}.controls div button:hover {background: rgb(0, 225, 255);}.controls div button:disabled {background: rgba(0, 225, 255, 0.5);}.contentList {margin-top: 50px;}.contentList li {padding: 20px 0;border-bottom: 1px dashed #ccc;position: relative;}.contentList li .info {position: relative;}.contentList li .info span {position: absolute;top: 15px;left: 100px;font: bold 16px '宋体';}.contentList li .info p {position: absolute;top: 40px;left: 100px;color: #aaa;font-size: 12px;}.contentList img {width: 80px;border-radius: 50%;}.contentList li .content {padding-left: 100px;color: #666;word-break: break-all;}.contentList li .the_del {position: absolute;right: 0;top: 0;font-size: 28px;cursor: pointer;}</style></head><body><div class="w"><!-- 操作的界面 --><div class="controls"><img src="./images/9.6/tip.png" alt="" /><br /><!-- maxlength 可以用来限制表单输入的内容长度 --><textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea><div><span class="useCount" id="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><!-- 微博内容列表 --><div class="contentList"><ul id="list"></ul></div></div><!-- 添加了hidden属性元素会直接隐藏掉 --><li hidden><div class="info"><img class="userpic" src="./images/9.6/03.jpg" /><span class="username">死数据:百里守约</span><p class="send-time">死数据:发布于 12月05日 00:07:54</p></div><div class="content">死数据:111</div><span class="the_del">X</span></li><script>// maxlength 是一个表单属性, 作用是给表单设置一个最大长度// 模拟数据let dataArr = [{uname: '司马懿', imgSrc: './images/9.5/01.jpg' },{uname: '女娲', imgSrc: './images/9.5/02.jpg' },{uname: '百里守约', imgSrc: './images/9.5/03.jpg' },{uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },{uname: '虞姬', imgSrc: './images/9.5/05.jpg' },{uname: '张良', imgSrc: './images/9.5/06.jpg' },{uname: '安其拉', imgSrc: './images/9.5/07.jpg' },{uname: '李白', imgSrc: './images/9.5/08.jpg' },{uname: '阿珂', imgSrc: './images/9.5/09.jpg' },{uname: '墨子', imgSrc: './images/9.5/10.jpg' },{uname: '鲁班', imgSrc: './images/9.5/11.jpg' },{uname: '嬴政', imgSrc: './images/9.5/12.jpg' },{uname: '孙膑', imgSrc: './images/9.5/13.jpg' },{uname: '周瑜', imgSrc: './images/9.5/14.jpg' },{uname: '老夫子', imgSrc: './images/9.5/15.jpg' },{uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },{uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },{uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },{uname: '露娜', imgSrc: './images/9.5/19.jpg' },{uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },{uname: '黄忠', imgSrc: './images/9.5/21.jpg' },{uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },]// 需求1：检测用户输入字数// 1. 注册input事件// 2. 将文本的内容的长度赋值给对应的数值// 3. 表单的maxlength属性可以直接限制在200个数之间let textarea = document.querySelector('textarea')let useCount = document.querySelector('.useCount')// 发布按钮let send = document.querySelector('#send')// ullet ul = document.querySelector('#list')textarea.addEventListener('input', function () {// console.log(this.value.length)useCount.innerHTML = this.value.length})// 需求2： 输入不能为空// 点击button之后判断// 判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空// 防止输入无意义空格, 使用字符串.trim()去掉首尾空格// console.log(' str')// console.log(' str '.trim())// 并将表单的value值设置为空字符串// 同时下面红色为设置为0send.addEventListener('click', function () {if (textarea.value.trim() === '') {// 并将表单的value值设置为空字符串textarea.value = ''// 同时下面红色为设置为0useCount.innerHTML = 0return alert('内容不能为空')}// 随机数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}let random = getRandom(0, dataArr.length - 1)// 需求3： 新增留言 写到send 的里面// 创建一个小li，然后里面通过innerHTML追加数据let li = document.createElement('li')// 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容li.innerHTML = `<div class="info"><img class="userpic" src=${dataArr[random].imgSrc}><span class="username">${dataArr[random].uname}</span><p class="send-time"> ${new Date().toLocaleString()} </p></div><div class="content">${textarea.value}</div><span class="the_del">X</span>`// 需求4：删除留言 放到追加的前面// 在事件处理函数里面获取点击按钮, 注册点击事件// (易错点: 必须在事件里面获取, 外面获取不到)// 删除对应的元素(通过this获取对应的那条需要删除的元素)// 教你一招: 放到追加进ul的前面，这样创建元素的同时顺便绑定了事件，赞~~// 使用 li.querySelector()let del = li.querySelector('.the_del')del.addEventListener('click', function () {// 删除操作 点击的是X 删除的小li 父元素.removeChild(子元素)ul.removeChild(li)})// 利用时间对象将时间动态化 new Date().toLocaleString()// 追加给 ul 用 父元素.insertBefore(子元素, 那个元素的前面)ul.insertBefore(li, ul.children[0])// 需求5：重置// 将表单域内容重置为空// 将userCount里面的内容重置为0textarea.value = ''// 同时下面红色为设置为0useCount.innerHTML = 0})// 按下回车可以生成留言信息// 事件侦听的三要素// textarea.addEventListener('键盘事件', function() {发布信息})textarea.addEventListener('keyup', function (e) {// console.log(11)// 俺们怎么知道用户按下了回车键呢？// console.log(e.keyCode) 已经废弃 只要 e.key === 'Enter'// console.log(e.key)if (e.key === 'Enter') {// alert(11)// 发布新闻// 自动触发点击按钮send.click()}})</script></body></html>
![[推荐]捉鱼(Catching fish)1500字英语作文](https://1500zi.500zi.com/uploadfile/img/2024/08/22/716a3df6ff7d840cd6d979efa0908b48.jpg)
