- 博客(19)
- 收藏
- 关注
RSS订阅
1原创 记住用户名数据
<input type="text" id="username"><input type="checkbox" id="remember">记住用户名 <script> localStorage.setItem('username', 123) var username = document.querySelector('#username') var remember = document.querySelecto
2020-07-13 14:59:37
166
原创 css3热点图动画
<style> .dd { position: relative; width: 600px; height: 500px; background-color:pink; } .city { position: absolute; top: 300px; .
2020-06-16 08:31:10
190
原创 轮播图制作
indow.addEventListener('load', function() { // 1. 获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth;
2020-06-12 14:12:54
116
原创 用函数封装一个动画，实现动画的前进后退
div { position: absolute; top: 100px; width: 200px; height: 200px; background-color: blue; } <div></div> <button class="btn1">400</button> <button class="btn2">800</bu..
2020-06-11 22:06:20
120
原创 防京东放大镜的制作
/* 盛放小图的盒子 */#box1{ width: 180px; height: 180px; overflow: hidden; position: relative; left: 100px; cursor: move;}/* 小图上可拖动的滑块 */#box1 span{ position: absolute; width: 100px; height: 100px; background:...
2020-06-11 10:23:33
125
原创 pc+移动端的拖拽框制作
<style> .b{ position: fixed; top: 50%; left: 50%; width: 300px; height: 200px; background-color: pink; transform: translate(-50%,-50%); } </style><div.
2020-06-10 16:11:19
121
原创 短信发送倒计时
<input type="text"> <button>发送</button> <script> var btn=document.querySelector('button') var time =3; btn.addEventListener('click',function(){ this.disabled = true var times =setInterval(function(..
2020-06-09 17:21:14
146
原创 打开定时器，关闭定时器（小细节要声明一个全局变量，不然无法清除）
<button class="begin">打开定时器</button> <button class="stop">停止定时器</button><script> var begin =document.querySelector('.begin') var stop =document.querySelector('.stop') var times =null; //全局变量，一个空对象，注意这个小细节 ...
2020-06-09 16:31:00
701
原创 倒计时的做法
<style> span { display: inline-block; width: 50px; height: 40px; line-height: 40px; background-color:pink; } </style> <div> <span class="hours"></span> ..
2020-06-09 15:56:26
96
原创 仿京东按键输入内容
搜索框输入案例思路：当我们按下s，光标定位到搜索框用键盘事件对象keyCode篇判断用户是否按下了s键搜索框获得焦点，使用js里面的focus()方法
2020-06-08 22:36:57
101
原创 京东案例-快递查询单号（当我们输入单号时，文本框上面自动显示大字号的内容）
* { padding: 0; margin: 0; box-sizing: border-box; } .box1 { position: relative; width: 200px; margin: 100px; } .box { display: none; position: absolute; top: -40px; width...
2020-06-08 22:32:20
944
原创 图片跟住鼠标移动案例
<style> div { position: absolute; width: 200px; height: 50px; background-color:pink; } </style><script> //div盒子可以跟着鼠标走 var div = document.querySelector('div') documen
2020-06-08 16:56:33
104
原创 事件委托的原理，利用冒泡原理
事件委托的原理：不是给每一个子节点单独设置监听器（注册事件），把监听器给给父元素，利用冒泡的原理影响每一个子元素<ul> <li>sadasd</li> <li>dsadasd</li> <li>dasdas</li> <li>asdas</li> <li>addsda</li></ul><script>
2020-06-08 15:36:26
179
原创 js-动态生成表格（根据虚拟数组里有多少个对象，对象有多少个属性，生成多少个单表格）
<table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>总结</th> </tr> <..
2020-06-07 16:37:12
343
原创 js-动态创建节点，案例：评论区发布新内容以及删除评论区的内容
每次点击发布，评论区就会新添加内容<textarea name="" id="" ></textarea> <button>按钮</button> <ul></ul> <script> var area =document.querySelector('textarea') var btn =document.querySelector('button')
2020-06-06 16:34:51
383
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人