- 博客(42)
- 收藏
- 关注
RSS订阅原创 a-tree-select组件父节点强关联子节点，子节点非强关联父节点
【代码】a-tree-select组件父节点强关联子节点，子节点非强关联父节点。
2024-03-02 15:49:07
522
原创 组合函数(管道思想)
<script> function double(v) { return v * 2; } function sqr(v) { return v * v * v; } function reduce(v) { v++; return v; } // ...fns是指定的一个不定参数. function pie(...fns){..
2022-03-09 15:04:24
65
原创 防抖和节流
<body> <input type="text" class="search"> <button class="btn">秒杀</button> <script> // 防抖:在动作停止了一段时间之后才会执行 // 节流:规定每隔多长时间执行一次. var input =document.querySelector('.search'); var btn =.
2022-03-09 14:55:14
62
原创 jquery实现购物车
<style> * { margin: 0; padding: 0; } ul { list-style: none; } body { user-select: none; } .container { width: 1200px; ..
2022-03-02 23:03:29
347
原创 Ajax请求电影列表
<style> * { margin: 0; padding: 0; } :root { --theme: red; } .content { width: 1200px; margin: 0 auto; padding-top: 30px; }...
2022-03-02 20:35:17
450
原创 dom全选和反选
<style> * { margin: 0; padding: 0; } .wrap { width: 800px; height: 400px; margin: 0 auto; } table { margin: 20px auto; } &l.
2022-02-26 20:49:58
164
原创 jquery表格删除添加信息
<style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box; } .
2022-02-26 20:47:37
367
原创 手风琴效果
<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } ul { width: 1000px; height: 400px; margin: 50px; } .
2022-02-26 10:23:12
51
原创 弹性盒子-flex
弹性盒子也叫做诡异盒模型,因为只要宽高设置多少,他的宽高就是多少,不会因为里面的内容影响盒子的大小.弹性盒子有主轴和交叉轴连个概念,分别有对应的属性.弹性容器属性:主轴排列(x轴方向):justify-contentjustify-content:flex-start(默认值):左对齐.justify-content:flex-end:右对齐.justify-content:center:居中.justify-content:space-around:盒子里面每个元素两侧间隔相等
2022-02-23 21:55:22
272
原创 CSS字体颜色改变
* { margin: 0; padding: 0; } ul { list-style: none; } p { font-size: 70px; font-weight: 600; text-align: center; line-height: 300px; ..
2022-02-22 20:33:14
901
原创 音视频操作
<!-- 音频播放一定要加播放控件(controls),不然不会展示 --> <audio src="小手拍拍.mp3" controls></audio><br> <button>播放/暂停</button> <button>查看媒体属性</button> <!-- 模拟进度条 --> <input class="vol" type="range" ..
2022-02-21 20:56:23
141
原创 Web存储
<button>存储信息</button> <button>获取信息</button> <button>删除信息</button> <button>key()</button> <button>存储引用数据</button> <button>获取引用数据</button><script> ...
2022-02-21 19:47:03
41
原创 数组方法和字符串方法
arr.push():在末端添加一个元素.<!-- 数组去重 --> <!-- 思路:遍历数组,获取里面每个元素的索引,把只有唯一索引对应的元素,用一个新的数组存放 --> <script> function quchong(arr){ var res=[]; for(var i =0;i<arr.length;i++){ if(arr.indexOf(arr[i])==
2022-02-20 20:24:48
215
原创 文字竞速小游戏
<style> * { padding: 0; margin: 0; } ul { list-style: none; } .list, .copy { margin: 10px 50px; /* 消除浮动影响 */ overflow: hidde...
2022-02-20 18:11:31
2332
原创 滚动跟随小广告
* { margin: 0; padding: 0; } .box { width: 50px; height: 200px; background-color: red; position: absolute; right: 30px; bottom: 40px; ...
2022-02-20 18:07:13
138
原创 进度条效果
* { margin: 0; padding: 0; } .box { width: 0; height: 10px; background-color: red; position: fixed; left: 0; top: 0; } body ..
2022-02-20 16:02:19
58
原创 无限滚动案例
//无限滚动 // 当滑块距离底部大于300出现滚动 // 滚动条滑块在距离底部 < 150px 时，往页面中添加内容，让它不能滑动到底部 //当文档高度-可视区域高度<300时继续添加内容 var bodyEl = document.body; while(bodyEl.scrollHeight-window.innerHeight<300){ var pEl=document....
2022-02-20 15:30:15
197
原创 JS图片懒加载
图片懒加载:为了提高页面性能,当图片出现在可视区域时再加载 <style> img { display: block; width: 600px; height: 300px; } </style><img src="" data-src="img/m1.jpg" alt=""> <img src="" data-src="img
2022-02-20 15:15:03
51
原创 JS瀑布流
<style> * { margin: 0; padding: 0; } .container { width: 1200px; margin: 50px auto; overflow: hidden; } ul { float: left; ...
2022-02-20 14:31:15
102
原创 JS封装一个多样式动画
<style> .box { width: 100px; height: 100px; background-color: red; position: relative; } </style> <div class="box"></div> //多样式动画封装 function animat.
2022-02-20 14:17:34
57
原创 JS封装单样式动画
<style> .box{ width: 100px; height: 100px; background-color: red; position: relative; } </style><div class="box"></div> //单样式动画封装 // 参数:元素,要变化的样式,目..
2022-02-20 11:54:41
61
原创 JS封装一个时间型运动函数
<style> .box{ width: 100px; height: 100px; background-color: red; } </style><div class="box"></div> //时间型运动函数 //参数:总时间,时序函数,回调函数 //思路:总时间/总路程=已将过去的时间/已..
2022-02-20 11:02:36
62
原创 js随机一个颜色(16进制)
function getcolor(n) { var res = '#' for (var j = 0; j < 6; j++) { var idx = Math.floor(Math.random() * 16); res += n[idx]; } return res } var arr = [0,1,2..
2022-02-19 21:11:56
277
原创 JS三大家族知识点
offest家族:offsetWidth和offsetHeight:(只读,且始终是整数)el.offsetWidth/offsetHeight返回元素占据页面的实际大小.el.offsetWidth/offsetHeight=元素自身的宽高+padding+border.行内元素和行内块元素:el.offsetWidth/offsetHeight=元素内容撑起来的宽度和高度.offsetParent:el.offsetParent返回的是距离该元素最近的带有定位的父级元素.
2022-02-17 20:40:21
228
原创 JS跑马灯呈现
<style> * { margin: 0; padding: 0; } .box { width: 300px; height: 100px; position: relative; border: 1px solid black; margin: 50px auto; ..
2022-02-17 18:01:22
175
原创 JS倒计时计时器
<h1>距离纪念日,还有</h1> <div class="item"> <span><span class="day">00</span>天</span> <strong><span class="hour">00</span>时</strong> <strong><span class="min"&.
2022-02-17 17:56:05
330
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人