html
菜鸟级码农小林
这个作者很懒,什么都没留下…
展开
-
flex布局 多种方法让两个盒子分布在左右两边
一个父盒子里面包含了两个子盒子的,可以用justify-content:space-between属性。原创 2022-11-30 11:50:22 · 13832 阅读 · 3 评论 -
vue 倒计时
vue 倒计时原创 2022-10-25 18:41:03 · 531 阅读 · 0 评论 -
vue+element-ui项目中实现复制功能
【代码】vue+element-ui项目中实现复制功能。原创 2022-09-23 17:08:56 · 1148 阅读 · 0 评论 -
vue 把链接转成二维码
vue 把链接转成二维码原创 2022-09-23 16:52:58 · 3346 阅读 · 1 评论 -
jQuery的排他思想
因为jQuery具备隐式迭代,所以在写排他思想的时候不需要循环遍历,直接用下面这个就能实现。<html> <button>变色</button> <button>变色</button> <button>变色</button> <button>变色</button></html><script> $('button').click(function.原创 2022-05-26 16:37:58 · 749 阅读 · 1 评论 -
本地存储
本地存储有两个:sessionStorage,localStoragesessionStorage和localStorage的区别<html> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</butto.原创 2022-05-20 11:02:18 · 115 阅读 · 0 评论 -
网页轮播图
lunbo.css<style> body { margin: 0 auto; width: 800px; } .box { width: 600px; height: 420px; position: relative; overflow: hidden; } .leftBox { display: none; position: absolute;.原创 2022-05-17 14:14:59 · 616 阅读 · 0 评论 -
变速的动画效果
先封装一个动画函数animate.jsfunction animate(obj,target,callBack){ clearInterval(obj.timer) obj.timer = setInterval(function(){ var step = (target - obj.offsetLeft) / 10 // 取整数 step = step > 0 ? Math.ceil(step) : Math.floor(step) if原创 2022-05-09 10:41:48 · 151 阅读 · 0 评论 -
简单动画原理
动画的原理: 就是利用定时器不断重复这个操作,停止动画则利用清除定时器来完成。<style> div{ position: absolute; left: 0; width: 200px; height: 200px; background-color: pink; }</style><html> <div></div></html><script> var ...原创 2022-05-07 15:45:12 · 144 阅读 · 0 评论 -
到指定位置固定侧边栏
<style> body{ margin:0 auto; width: 800px; } .goBack{ display: none; } .aside{ background-color: pink; width: 50px; height: 200px; position: absolute; top: 400px; left: 1400px; } .header{ background-color: red; width: 80.原创 2022-05-07 14:03:09 · 364 阅读 · 0 评论 -
图片放大镜效果
<style> .content{ position: relative; border: 1px solid #ccc; height: 400px; width: 400px; text-align: center; } .eyeImg{ width: 300px; height: 300px; margin: 50px; } .mask{ position: absolute; top: 0; left: 0; width: 20.原创 2022-05-06 15:32:40 · 91 阅读 · 0 评论 -
手机发送验证码
<html> <input type="text"> <button>发送</button></html><script> var btn = document.querySelector('button') var time = 3; btn.addEventListener('click', function () { btn.disabled = true .原创 2022-05-02 19:20:21 · 84 阅读 · 0 评论 -
倒计时页面效果
<style> span { background-color: #333; color: #fff; }</style><html> <span class="hour">1</span> : <span class="minute">2</span> : <span class="second">3</span><.原创 2022-05-02 18:51:16 · 183 阅读 · 0 评论 -
模拟京东快递单号查询框
<html> <div class="con"></div> <input type="text" placeholder="请输入内容"></html><style> .con { display: none; background-color: #fff; height: 50px; line-height: 50px; f.原创 2022-05-02 17:32:57 · 264 阅读 · 0 评论 -
动态生成表格
<style> table { width: 500px; margin: 100px auto; border-collapse: collapse; /*相邻边合并*/ text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40.原创 2022-04-29 17:12:51 · 94 阅读 · 0 评论 -
简单的发布留言
<html> <textarea name="" id=""></textarea> <button>发送</button> <ul> <li></li> </ul> </html><script> var text = document.querySelector('textarea') var btn = documen.原创 2022-04-29 14:44:46 · 55 阅读 · 0 评论 -
排他思想(算法)
<html> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button></html><script> // 获取所有按钮元素 var bt.原创 2022-04-28 18:01:33 · 278 阅读 · 0 评论 -
密码框验证信息
<html> <input type="password" class="pwd" /> <p class="message">请输入6~16位的密码</p></html><script> // 获取元素 var a = document.querySelector(".pwd"); var b = document.querySelector(".message"); .原创 2022-04-28 16:58:19 · 349 阅读 · 0 评论 -
显示隐藏文本框内容
<html> <input type="text" value="手机" style="color: #999;"></html><script> // 获取元素 var a = document.querySelector('input') // 获取焦点事件 onfocus a.onfocus = function(){ if(this.value === '手机'){ .原创 2022-04-28 15:41:19 · 82 阅读 · 0 评论 -
密码设置隐藏
<html> <div> <img src="./close.jpg" alt="" id="eye" /> <input type="password" placeholder="请输入密码" id="pwd" /> </div></html><script> //1. 获取元素 var pwd = document.getElementById("pw.原创 2022-04-28 12:08:27 · 97 阅读 · 0 评论