- 博客(42)
- 收藏
- 关注
RSS订阅原创 避免Ajax回调(异步变同步)
可以用async和await让函数顺序等待执行 async function getFinalMovie(){ // 1. 可以获取一个promise的结果 var mId = await getMovieListPromise(); // 异步变成了同步,上面拿到值才会执行第二个 var movie = await getMovieByMIdPromise(mId); console.log('async...await获取结果:',mov
2021-12-29 17:18:51
496
原创 数组里的对象属性值排序(闭包)
function sortArr(key) { return userLs.sort(function(obj1, obj2) { return obj1[key] - obj2[key] }) } var userLs = [{ name: "李白", age: 24, score: 97 }, { ..
2021-12-14 11:35:12
403
原创 不死神兔斐波那契数列尾递归
//尾递归 function fb(n, a1 = 0, a2 = 1) { return n == 0 ? a1 : fb(n - 1, a2, a1 + a2); }
2021-12-14 11:33:27
408
原创 数组或对象完全深克隆的方法
1用json转换方法转换一边;(好比把铁锅熔成铁水新建铸一个)此方法不能克隆出对象里面的函数项,会丢失数据 var newobj = JSON.parse(JSON.stringify(obj))2.递归克隆此方法可以完全克隆数组或对象 function deepclong(e) { //如果是空就返回空 if (e === null) { return null;
2021-12-10 16:41:58
264
原创 websocket实现跨域的完整操作
<script> var ws = null; //定义一个全局变量 // 点击建立连接 $(".set").click(function() { //建立连接 ws = new WebSocket("ws://192.168.124.46:9000/robot"); //连接成功 ws.onopen = functio.
2021-12-09 19:33:36
2066
原创 js输入框获取回车事件
<input type="text" onkeydown="keydown()"> <button class="send">发送消息</button><script>function keydown() { var event = arguments.callee.caller.arguments[0] || window.event; //调节浏览器兼容 if (event.keyCo...
2021-12-09 19:18:12
1829
原创 flex使用justify-content时的元素从起始排列
如图 最后一行的元素不会默认从左边排列.解救办法当最后一行元素为一个时的情况不用考虑,因为会默认靠边,因此至少最后一行有;两个元素才会考虑这种情况;我们可以在元素后面追加(列数-最后一行的元素的个数)个元素并设置样式(因为图中缺少两个元素,所以追加两个并设置最后两个的高度为0 ,就不会显示且会站位)样式.inner:nth-last-child(-n + 2) { height: 0; margin-bottom: 0;...
2021-11-30 19:36:16
283
原创 flex弹性布局
justify-content主轴排列当主轴默认为横向的时候才为横向排列属性值align-items交叉轴排列只有一跟轴线时方便使用属性值align-contentalign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用属性值有 flex-start | flex-end | center | space-between | space-around | space-evenly效...
2021-11-30 19:18:57
646
原创 animation动画实现钟表
html部分<!-- 创建一个表盘和时分秒针还有毫秒 --> <div class="witch"> <div class="hour"></div> <div class="min"></div> <div class="ms"></div> <div class="s"></div> </div
2021-11-30 15:10:32
341
原创 页面回到头部的方法
window.scroll(0, 0);第一个值为x轴,第二个值Y轴window.scrollBy(-10, -10);是让window滚动条每次相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。document.documentElement.scrollTop = 0;Top为Y轴
2021-11-24 19:50:48
135
原创 查看浏览器已卷入的视口的方法
document.documentElement.scrollTop;-------可读可写window.pageYOffset;---------只读
2021-11-24 19:44:23
519
原创 html的响应式原理和写法
最简单的就是把页面设置为最大最小为一倍，禁止缩放 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">让后在HTML的style里面设置(貌似外链试不行)此样式//这里设置视口小于600像素 ,让里面的item元素宽度为当前的100%@media (max-width: 600px) { .main .l
2021-11-24 19:41:46
123
原创 js区域拖拽
//父元素 var boxEl = document.querySelector('.box'); // 子元素 var innerBox = document.querySelector(".innerBox"); innerBox.onmousedown = function() { //获取各个边距 var startLeft = event.clientX - innerBox.off..
2021-11-23 16:58:26
496
原创 页面离开,关闭定时器的操作document.addEventListener
document.addEventListener("visibilitychange", function() {})其中visibilitychange有两个值hidden表示离开,visible表示进入代码如下 document.addEventListener("visibilitychange", function() { //页面离开时的效果 if (document.visibilityState === "hidden"...
2021-11-20 11:30:32
2035
1
原创 js实现完整轮播
主要实现,点击轮播,自动轮播,和点击下标切换(注意!!,点击后要记录当前索引,从下一个开始自动轮播)代码:html 和 css部分 <style> * { margin: 0; padding: 0; } a { text-decoration: none; } .banner {
2021-11-20 09:42:11
457
原创 js轮播最后一张跳到第一张的处理
如果直接最后一张滑到第一张会显得很僵硬,所以前后都放要显示第一张图片实现前后的切换可以优化这个效果当此时点击左边的时候,直接跳到最后一张的图一然后往回走,点击后此时的图片为最后一张图,再往回走同理,当在最后点击下一张时,快速切换为第一张图一,在向后走此时切换到第一张图一代码如下 function itemMove(yes) { //点击右边触发 if (yes) { ...
2021-11-20 09:35:50
3429
原创 js轮播时的动画效果函数封装
在这里需要先在轮播里计算好要移动的像素target,和移动的元素box,调用函数传参即可.function getLeft(target, box) { var long = 15; var currleft = box.offsetLeft; //获取元素左边距 if (target == currleft) { return; } //如果相等则不动
2021-11-20 09:17:37
479
原创 js实现生日倒计时
var endTime = new Date('2022-04-15 23:59:59'); //生日时间 var boxEl = document.querySelector(".box") var endTimes = endTime.getTime(); //生日时间到1970年的毫秒数 var SEC_MS = 1000; var MIN_MS = 60 * SEC_MS; var HOUR_MS = 60...
2021-11-17 19:32:28
1023
原创 js设置获取验证码
setInterval(); 循环执行clearInterval(); 清除循环执行的定时器代码 function getCode(e) { //设置按钮不可点 e.disabled = true //设置时间 var count = 5; e.innerText = count + "s" var time1 = setInterval(fu
2021-11-17 16:59:53
125
原创 js实现复选框的反选和全选
全选:<input type="checkbox" class="allChecked" onclick="handallChecked()"><br> 路飞: <input class="name" type="checkbox"><br> 狗蛋: <input class="name" type="checkbox"><br> 迪迦: <input class="name" type="checkbo.
2021-11-17 15:42:49
256
原创 dom的节点克隆
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。要复制的节点.cloneNode(true);//深客隆克隆完毕还需要把元素添加进节点function clonRed() { var addClon = AddDiv.cloneNode(true) boxEl.appendChild(addClon) }...
2021-11-16 17:20:22
486
原创 dom的节点删除
父节点.removeChild(子节点);删除自己本身:this.parentNode.removeChild(this)双击删除事件var liEls = document.querySelectorAll("ul li"); for (var i = 0; i < liEls.length; i++) { liEls[i].ondblclick = function() { this.parentNode.
2021-11-16 17:16:14
395
原创 dom的创建和插入节点
创建var innerDiv = document.createElement("div")创完还要插入到元素里面插入var boxEl = document.querySelector('.box');var innerDiv = document.createElement("div")boxEl.parentNode.insertBefore(innerDiv, boxEl)//在boxEl的前面插入,如果要在最后就把boxEl换为null几种简单的插入方法在元
2021-11-16 17:11:19
597
原创 js实现导航栏点击变色
主要用到classList来反复增加删除已经设置好的背景属性elem.classList.add / remove(class) — 添加 / 移除类。html <div class="warp"> <p class="active">商品介绍</p> <p>规格与包装</p> <p>售后保障</p> <p>商品评价（50000）<
2021-11-15 19:51:59
1960
原创 js实现图片走廊
HTML部分<div class="banner"> <img src="../public/img/m1.jpg" alt=""> </div> <div class="list"> <img src="../public/img/m1.jpg" alt=""> <img src="../public/img/m2.jpg" alt=""> <
2021-11-15 19:43:53
593
原创 浅谈js判断子串重复多次
给定一个非空的字符串，判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母，并且长度不超过10000。示例：输入: "abab"输出: True解释: 可由子字符串 "ab" 重复两次构成。输入: "aba"输出: False输入: "abcabcabcabc"输出: True解释: 可由子字符串 "abc" 重复四次构成。 (或者子字符串 "abcabc" 重复两次构成。)方法一:旋转拼接法:str.slice(i)表示取索引i后面的所有元素,str.
2021-11-13 09:22:25
767
原创 js封装方法将字符串转化为驼峰命名
function fn(str) { var arr = str.split("-") //把字符按 "-"分成数组 var newstr = arr[0] for (var i = 1; i < arr.length; i++) { newstr += getOneBig(arr[i]) } //把数组的第一个后面的元素首字母转大写 functi.
2021-11-12 09:50:01
661
原创 js实现统计字符字母出现最多的函数
主要频繁使用数组对象字符之间的接收和转换 function getMax(str) { var obj = {} for (var i = 0; i < str.length; i++) { if (obj[str[i]]) { obj[str[i]] += 1 } else { obj[str[i]] =
2021-11-12 09:48:11
482
原创 js随机生成16进制的颜色
function getColor() { var str = "0123456789abcdef" var color = "#" for (var i = 1; i <= 6; i++) { color += str[parseInt(Math.random() * 16)] } return color }
2021-11-12 09:45:42
484
原创 数组去重的三种方法
//方法一 function getRepeat(str) { var arr = []; for (var i = 0; i < str.length; i++) { if (!arr.includes(str[i])) { arr.push(str[i]) } } return ar.
2021-11-11 15:09:17
228
原创 js实现数组的乱序
sort属性可对数组实现升降序返回值小于0代表升序，大于零代表降序，用random随机进行升降序来实现function getDis(array) { array.sort(function(a, b) { return Math.random()-0.5 }) return array }即可实现随机乱序...
2021-11-11 15:07:15
408
原创 js递归遍历对象的属性和属性值
用到typeof来判断类型代码:function getObject(obj) { if (typeof obj != "object") { console.log([obj] + "不是对象"); //判断是否为对象 } else { for (var i in obj) { if (obj[i] != null) { //判断对象是否为空
2021-11-11 14:43:12
935
原创 js对象如何在html页面输出
发现声名的对象输出在html页面上时总是object,查阅资料后发先解决问题的代码，如下： var arr = [{ age: 19, name: '张三' }, { age: 55, name: '李四' }, { age: 12, name: '王五' }, { age.
2021-11-09 20:02:30
1455
原创 js简单随机设置盒子颜色
见代码var r = parseInt(Math.random() * 256); var g = parseInt(Math.random() * 256);//随机获取0-255; var b = parseInt(Math.random() * 256); var a = parseInt(Math.random() * 11) //10;获取0-10的整数再得到0-1的一位小数; document.write(`随机的颜色为rgb
2021-11-08 20:21:00
787
原创 js三种排序方法
冒泡法// 6个数排序 最大需要5轮// 外层循环控制轮次for (var i = 1; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { // 找到本轮最大的数,并排在本轮尾部 if (arr[j] > arr[j + 1]) { // 交换位置 var temp = arr[j]; ..
2021-11-06 11:33:48
152
原创 如何用css做一个立方体
html <div class="box"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> &
2021-11-03 20:36:21
165
原创 after和before
注意事项: 1. 作为子元素 加入进去的 (最前边 和 最后边) 2. content属性 必须设置 3. 是一个行内元素4.可以 在 标签的 内部 去 添加 两个 伪元素 标签 p::before{ content: 'hello'; width: 100px; height: 50px; }一...
2021-11-02 11:18:40
62
原创 html新增
多媒体标签 <audio src="小手拍拍.mp3" autoplay controls muted></audio> <!-- autoplay 自动播放(音频无效) --> <!-- muted 静音 --> <!-- controls 播放控件 --> <video src="小手拍拍.mp4" controls autoplay muted></video&...
2021-11-02 10:12:19
91
原创 css hover后面的选择
<div> <img class="img" src="../public/img/时间.png" alt=""> </img> <P class="p">段落</P> <h2 class="h2">段落2</h2> <h3>段落3</h3> </div>触摸div使里面的其他元素发生变化 .
2021-10-21 22:16:42
705
原创 关于用css解决触摸图片，图片变色的问题
如图，箭头为黑色，需实现触摸方块箭头和字体边框都变成红色效果图解决办法设置两个颜色的箭头图片浮动放在同一位置 另红色的为隐藏html <div class="but"> <img src="../public/img/向左箭头.png" alt="" class="left"> <img src="../public/img/向左箭头 (1).png" alt="" class="leftred"> 上一节...
2021-10-20 21:55:41
1260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人