<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body>input {/*设置成block可以居中显示*/display: block;margin: 0 auto;margin-top: 100px;background-color: pink;/*position: absolute;*//*top: 100px;*//*left: 50%;*/}.box {background-color: rgba(21,0,10,0.35);/*float: left;*//*width: 100%;*//*height: 100%;*//*绝对定位*/position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: none;}.alert {width: 300px;height: 200px;background: white;/*margin: 0 auto;*//*margin-top: 100px;*//*这个好*/position: absolute;top: 100px;left: 50%;margin-left: -150px;/*text-align: center;*//*line-height: 200px;*/}.x {width: 20px;height: 20px;background-color: red;position: absolute;top: 0;right: 0;text-align: center;line-height: 20px;}</style></head><body><input type="button" value="https://www.huyubaike.com/biancheng/点击模态框" id="btn"><div class="box"><div class="alert"><p>用户名: <input type="text" name="username"></p><p>密码: <input type="password" name="password"></p><p><input type="button" value="https://www.huyubaike.com/biancheng/submit"></p><div class="x">x</div></div></div><script>// 绑定点击事件: 通过将display: block实现var btn = document.getElementById('btn')var box1 = document.getElementsByClassName('box')[0]// 一定记得加上索引btn.onclick = function (){box1.style.display = 'block'}// 绑定回退事件var box3 = document.getElementsByClassName('x')[0]box3.onclick = function (){box1.style.display = "none";// 将输入框清空document.getElementsByName('username')[0].valuehttps://www.huyubaike.com/biancheng/= ''document.getElementsByName('password')[0].valuehttps://www.huyubaike.com/biancheng/= ''}</script></body></html>18.点击有惊喜<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;background-color: red;border-radius: 50%;text-align: center;line-height: 200px;font-size: 25px;font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;color: white;margin: 0 auto;}</style></head><body><div class="box">点击有惊喜</div><script>var oDiv = document.getElementsByClassName('box')[0];var count = 0;oDiv.onclick = function (){count++if (count == 1){this.style.backgroundColor = 'green'this.innerText = '继续点击'}else if (count == 2){this.style.backgroundColor = 'yellow'this.innerText = '精彩即将揭晓'}else if (count == 3){this.style.backgroundColor = 'pink'this.innerText = '骗你的傻逼'}else {this.style.backgroundColor = 'red'this.innerText = '点击有惊喜'count = 0}}</script></body></html>19.简易评论框<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box1 {width: 100%;background-color: pink;text-align: center;font-size: 20px;word-break: break-all;}ul>li{list-style: none;text-align: left;/*height: 50px;*/width: 80%;background-color: #0e94ea;border: 1px dotted black;margin: 0 auto;margin-bottom: 10px;margin-left: 71px;border-radius: 10px;}.font {font-size: 15px;font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;}</style></head><body><div class="box1">评论区<ul></ul></div><hr><div class="box2"><!--onblur: 失去焦点--><textarea cols="30" rows="10" id="content"onfocus="if(valuehttps://www.huyubaike.com/biancheng/=='留下你的脚印'){value=''}"onblur="if (valuehttps://www.huyubaike.com/biancheng/==''){value=''}">留下你的脚印</textarea></div><input type="button" value="https://www.huyubaike.com/biancheng/submit" id="btn"><input type="button" value="https://www.huyubaike.com/biancheng/count" id="cal"><script>var btn = document.getElementById('btn')btn.onclick = function (){var li = document.createElement('li')// 每一个楼层var text = document.getElementById("content")// 评论内容var val = text.valueif (val.length != 0){var ul = document.getElementsByTagName('ul')[0]var p1 = document.createElement('p')var p2 = document.createElement('p')p2.classList.add("font")// 设置时间和评论数量var count = document.getElementsByTagName('li').length + 1var ctime = new Date().toLocaleString()// 处理楼层内容p1.innerHTML = '#' + '<span class="num">'+ count + "</span>" + '楼' + ' '+ ctime + ' ' + '<span class="del">删除</span>'// 处理评论内容p2.innerHTML = val// 添加到列表li中li.appendChild(p1)li.appendChild(p2)// 处理不存在文字ul.appendChild(li)text.valuehttps://www.huyubaike.com/biancheng/= ""var delButton = document.getElementsByClassName('del')var currentButton = delButton[delButton.length-1]// 获取到当前按钮// 每一个评论绑定点击的事件currentButton.onclick = function(){// alert(123123)// 把后面的楼层都减1var allNum = document.getElementsByClassName('num')// 拿到所有的楼层信息列表var currentNum = this.previousElementSibling// 核心操作: 将所有的num信息循环并找到当前点击的索引. 根据索引for (var i=0;i<allNum.length;i++){if (currentNum === allNum[i]){for(var j=i+1;j<allNum.length;j++){allNum[j].innerText = parseInt(allNum[j].innerText) -1;// 将num标签中的数字-1}}}ul.removeChild(this.parentNode.parentNode)// 删除li标签}}}</script></body></html>
推荐阅读
- 云原生时代的DevOps平台设计之道
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
- JavaScript之无题之让人烦躁的模块化
- 云原生强大且灵活的持续集成CI开源框架Tekton实战-上
- 云原生下基于K8S声明式GitOps持续部署工具ArgoCD实战-上
- 云原生虚拟网络 tun/tap & veth-pair
- 原生Redis跨数据中心双向同步优化实践
- 五 JPA - 原生SQL实现增删改查
- Javascript 手写 LRU 算法
- 如何逃离原生家庭的折磨 如何逃离原生家庭的伤害