js
基础不牢 地动山摇
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
数组如何扁平化?
1.有一个多维数组如下:let arr = [[1, 2, 3,[1,2,3,[4,4]] ,4], 1, [1],[[1, [3, 5, [5, 6, 7]]],2]]现在要将此数组变成一维数组,有多少种方法?2.如何实现?2.1 flat注意:低版本浏览器可能会有兼容性问题.flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。不影响原数组。arr.flat([depth])//depth 可选指定要提取嵌套数组的结构深度,原创 2022-04-26 23:22:59 · 151 阅读 · 0 评论 -
for循环中setTimeout的作用域问题
1.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数。for (var i = 0; i < 8; i++) { setTimeout(() => { console.log(i)//8个8 }, 100)}setTimeout是异步执行,每一次for循环的时候,setTimeout都执行一次,而里面的函数被放到任务队列中,主线任务执行完毕,才会被执行。这就会导致,for循环运行结束之后,才会执行打印。出现这个问题原创 2022-03-02 22:55:55 · 397 阅读 · 0 评论 -
es6中的let和const
前言es6新增let和const命令,用来声明变量,用法类似var,接下来,我将详细的说说let和const1.为什么新增letvar不好吗,为啥要新增一个let呢?var缺点还真的多,我能列出三点:1.可以重复声明 2.无法限制修改 3.木有块级作用域重复声明 :var a = 10;var a = 20;console.log(a)//20木有块级作用域啥是块级作用域呢?{},if(){},for(){}{ var a = 10; console.log(a)原创 2022-03-02 18:51:29 · 218 阅读 · 0 评论 -
数组删除delete和splice的区别
数组删除delete和splice的区别原创 2022-02-23 18:19:01 · 817 阅读 · 0 评论 -
你理解js中map,set,array.from()吗
1.Js中Map对象的使用(es6新增)Map对象保存键/值对,是键/值对的集合。任何值(对象或者原始值) 都可以作为一个键或一个值。Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应。Map是一组键值对的结构,具有极快的查找速度。原创 2022-02-19 01:23:27 · 1332 阅读 · 0 评论 -
如何用console.log打印图文?
1.consoleconsole是全局变量window(或global)下的一个对象,在控制台打印console,可以发现他提供了很多方法。 console.log(console)2.占位符 console.log("打印的字符串是:%s", "123"); console.log("%o", document.body); console.log("打印的整数是:%d", 111.00); console.log("打印的浮点数是:%f", 111.00);3.打印文字和图片原创 2022-02-15 11:19:09 · 1852 阅读 · 0 评论 -
js中数组和字符串的相互转换
1.字符串到数组split方法:split() 方法用于把一个字符串分割成字符串数组stringObject.split(separator,howmany)如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。String.split() 执行的操作与 Array.join 执行的操作是相反的。var s = "1,2,3,6";var a = s.split(",");console.log(a);a====["1", "2原创 2021-12-20 22:08:34 · 410 阅读 · 0 评论 -
js实现rgb和16进制颜色的相互转化
16进制转rgb transRgb(color) { var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; var sColor = color.toLowerCase(); if (sColor && reg.test(sColor)) { if (sColor.length === 4) { var sColorNew = "#"; for (var i = 1; i <原创 2021-11-22 17:52:55 · 596 阅读 · 0 评论 -
js实现图片上一张下一张点击
1.实现效果2.实现原理根据数组的长度和一个div的宽度,计算出父元素的长度。document.getElementById("goods_bx").style.width=goods_list.length * 271 + 'px';当点击上一张或下一张的时候,设置他的margin-left。document.getElementById("goods_bx").style.marginLeft=mr * 271 + 'px';为这个父元素再添加一个父元素,设置他的overflow-x为原创 2021-09-25 03:02:18 · 977 阅读 · 0 评论 -
微信小程序实现历史搜索功能(h5同理)
1.实现效果2.实现原理将数据存在storage中。wx.setStorageSync('search_history', JSON.stringify(this.data.list))取数组前15条。 if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15) })原创 2021-09-23 00:07:58 · 2225 阅读 · 5 评论 -
css的conic-gradient+linear-gradient+radial-gradient
1.什么是conic-gradientconic-gradient是圆锥渐变,原创 2021-08-30 16:10:48 · 991 阅读 · 1 评论 -
微信小程序实现星星评分组件(原生)
1.实现效果2.组件介绍3.部分代码// components/rating/index.jsComponent({ /** * 组件的属性列表 */ properties: { stars:{ type:Array, value:[1,1,1,1,1] }, // 是否只读 readOnly:{ type:Boolean, value:false, }, // 星星大小原创 2021-08-24 01:03:58 · 1231 阅读 · 0 评论 -
微信小程序video自定义播放与暂停按钮
1.实现效果2.实现原理官网:https://developers.weixin.qq.com/miniprogram/dev/component/video.html相关API:wx.createVideoContext(string id, Object this)属性:3.此demo所用到的属性有controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)muted:是否静音show-play-btn:是否显示视频底部控制栏的播放按钮show-center-pl原创 2021-08-06 11:12:00 · 6188 阅读 · 1 评论 -
微信小程序地址选择wx.chooseLocation
1.实现效果2.实现原理https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html3.完整代码https://gitee.com/susuhhhhhh/wxmini_demo4.部分代码// pages/choseAddress/index.jsPage({ /** * 页面的初始数据 */ data: { add:true, addressN原创 2021-07-26 17:24:43 · 4881 阅读 · 1 评论 -
cover-view覆盖canvas
1.实现效果2.实现原理https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html覆盖在原生组件之上的文本视图。目前原生组件均已支持同层渲染,建议使用 view 替代。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。组件属性的长度单位原创 2021-07-23 09:32:57 · 1995 阅读 · 0 评论 -
vantWeapp实现星星评分
1.效果图2.实现原理https://vant-contrib.gitee.io/vant-weapp/#/rate3.完整代码https://gitee.com/susuhhhhhh/picker4.实现步骤克隆代码之后,在components的文件夹下的vant文件夹,为实现星星评分的组件。部分代码<!--pages/star/index.wxml--><view class="star"> <van-rate value="{{ star }}"原创 2021-07-21 17:03:12 · 1563 阅读 · 0 评论 -
echarts饼图自定义formatter
1.实现效果2.实现原理echarts官网:https://echarts.apache.org/zh/index.html3.完整代码https://gitee.com/susuhhhhhh/responsive-web-page4.主要代码var myChart = echarts.init(document.getElementById('main3'));var option = { title: { text: '这是一个echarts图表' }, to原创 2021-07-08 22:26:09 · 1896 阅读 · 0 评论 -
微信小程序自定义验证码+密码样式
1.实现效果图(三种样式)2.实现原理定义一个input框用来输入验证码信息,将此input框用绝对定位进行位置偏移隐藏(或设置宽高为0),再用新的view覆盖在这个input框上面,用来显示输入的value。3.完整代码(更多代码请移步码云)https://gitee.com/susuhhhhhh/wxmini_demo喜欢的就关注+start一下~4.有一个bug待完善当复制的时候 第一次从剪切板显示内容可以进行粘贴,当剪切板不出现时候,由于input被隐藏,无法长按粘贴。试着解决原创 2021-07-05 09:43:55 · 1861 阅读 · 0 评论 -
echarts官方提供的小程序版本
1.实现效果2.echarts官网echarts3.步骤(1):引用组件{ "navigationBarTitleText": "echarts官方提供的小程序版本", "usingComponents": { "ec-canvas": "../../components/ec-canvas/ec-canvas" }}(2):几个重点legend:设置显示的标签tooltip:是否显示弹框formatter中的a,b,c,d等参数的意义:其中变量a、b、c在不原创 2021-06-28 17:43:39 · 948 阅读 · 0 评论 -
微信小程序自定义轮播图指示点(新建指示点)
1.效果图2.代码<view class="top"> <swiper current="{{swiperCurrent}}" bindchange="swiperChange" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{goodsInfo.imgList}}"> <原创 2021-06-15 16:10:58 · 608 阅读 · 0 评论 -
getElementById和querySelector方法的区别
1.querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。2.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。3.区别getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后原创 2021-06-11 20:30:01 · 1905 阅读 · 0 评论 -
微信小程序实现物流步骤条
1.效果图2.完整代码:码云链接:https://gitee.com/susuhhhhhh/wxmini_demo3.部分代码<!-- 物流区 --><view class="con1 flex-row"> <view> <image src="/img/order_icon5.png" class="order_icon"></image> </view> <view class="w_text">原创 2021-06-10 11:10:00 · 3085 阅读 · 2 评论