JavaScript
Bright2017
学,然后知不足!
展开
-
HTML5事件—visibilitychange 页面可见性改变事件
visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了转载 2022-11-10 14:14:04 · 1270 阅读 · 0 评论 -
js 实现算法二分查找
二分算法:概念简单易懂、就是把一组有序数组、每次一分为二的去查找。举例:超市买了一堆东西、结完账警报器响了。东西太多、一个一个拿出来警报器过一遍、太浪费时间。保安大哥将你买的东西一分为二、哪边响了、说明哪边有东西没结账。重复两三次、基本就定位了你没结账的物品。在lertCode刷了一道有关的题使用二分算法实现给定一个n个元素有序的(升序)整型数组nums 和一个目标值target ,写一个函数搜索nums中的 target,如果目标值存在返回下标,否则返回 -1。来源:...原创 2022-04-13 10:45:05 · 1735 阅读 · 0 评论 -
vue中插槽在组件中的应用
场景:暂无数据组件中使用插槽接收、暂无数据这个组件在图表组件中应用、由最外层图表组件自定义插槽内容、最终传入暂无数据组件中。最外层图表组件使用:ComPie是图表组件 <ComPie :series="chart3.series"> <template slot="icon"> <div>自定义</div> <原创 2022-03-14 11:43:05 · 1339 阅读 · 0 评论 -
vue移动端项目返回上次浏览位置
效果描述:列表查询页、每页10条数据、滚动至底部加载更多数据、点击进入详情。再次返回列表查询页不希望从第一页重新查找、而是直接滚动到上次浏览的位置。实现思路:点击列表进入详情页时、记录当前点击的位置、将参数传入详情页、返回列表页时将参数再传递回来。列表页初次加载时判断是否存在上次记录的位置参数、存在表示有历史记录、直接请求数据、找到位置、然后调用 scrollIntoView() 方法滚动到指定位置。举例:我上一次点击了第180条数据、记录索引108、每页10条数据、所以当时记录的页码pag原创 2022-03-14 09:55:38 · 2737 阅读 · 0 评论 -
js设计模式-状态模式-示例(高压锅状态)
<template> <div class="cooker"> <img src="../assets/gaoyaguo.png" alt="." /> <div class="flex typeName"> <div>状态:{{ typeName }}</div> <div>描述:{{ desction }}</div> </div>...原创 2022-03-12 14:27:32 · 1418 阅读 · 0 评论 -
js求数组的每一项累加前一项
var baseArr = [1,0,8,9,0,4]; // 求数组的每一项累加前一项 // 求得 baseArr = [1,1,9,18,18,22] var setArr = []; var currNum = 0; baseArr.forEach((item, index) => { if(index == 0){ setArr.push(baseArr[index]); }else{ if(.转载 2022-02-17 09:23:12 · 566 阅读 · 0 评论 -
js生成指定范围随机数
一、预备知识Math.ceil(n); //向上取整。返回大于等于n的最小整数。Math.floor(n); //向下取整。返回为n的整数部分。Math.round(n); //四舍五入。返回为n四舍五入后的整数。Math.random(n); //0.0 ~ 1.0 之间的一个伪随机数。【包含0,不包含1】 //比如0.8647578968666494Math.ceil(Math.random()*10); //获取从1到10的随机整数,取0的概率极小。Ma...转载 2022-02-10 17:16:40 · 7113 阅读 · 2 评论 -
JS中字符串每隔5个添加一个字符
最终效果var txtString = "111112222233333444445555566666";var result = "";for(var i=0,len=txtString.length;i<len;i++){ if(i % 5 === 0) result += '/n'; result += txtString[i];}console.log("结果", result)i % 5 指的是i除以5之后的余数,比如i=3,i%5=3; i=10, ..原创 2021-08-04 10:00:07 · 882 阅读 · 0 评论 -
页面ajax多次请求数据!!!
我发誓,这是我进入这行以来遇到过最恶心的问题。让我整整头疼了两天,两天没睡好觉。事情的起源和这个插件有关: 虽然Jquery有自带的ajax,但是有时候页面可能也会用到一些别的ajax插件。简单描述一下我的问题:可能和其他的ajax多次加载不太一样,进入第一次,加载一次,第二次进入,加载两次,第三次进入,加载三次。。。依次叠加。 $(document).on("clic原创 2017-03-30 17:41:32 · 4874 阅读 · 0 评论 -
简单了解Ajax
Ajax是目前网页当中比较常用的了,简单复习一下。一般格式:$.ajax( { url:'xxx', cache:false, type:'post', data: xxx, dataType:'json', success:function(data){ if(data.msg =="true"...原创 2017-05-06 23:50:24 · 659 阅读 · 0 评论 -
js 数组、对象转json 以及json转 数组、对象
1、JS对象转JSON方式:JSON.stringify(obj)var json = {"name":"iphone","price":666}; //创建对象;var jsonStr = JSON.stringify(json); //转为JSON字符串console.log(jsonStr);2、JS数组转JSON//数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr );3、JS对象数组转转载 2021-03-15 13:27:22 · 4580 阅读 · 0 评论 -
js将一位数组分割成每三个一组
var data = [ {name:'Liming',age:'1'}, {name:'Liming',age:'2'}, {name:'Liming',age:'3'}, {name:'Liming',age:'4'}, {name:'Liming',age:'5'}, {name:'Liming',age:'6'}, {...转载 2020-04-02 09:25:46 · 5329 阅读 · 0 评论 -
js 秒的倒计时,将秒转换为时分秒显示
{{moveMin}}// ...methods: { // 补0 formatBit (val) { val = +val return val > 9 ? val : '0' + val }, // 秒转时分秒,求模很重要,数字的下舍入 formatSeconds (time) { let min = Math...转载 2019-12-30 16:42:00 · 1345 阅读 · 0 评论 -
es6 删除数组指定元素
arr.splice(arr.findIndex(item => item.id === id), 1)//item 只是参数可以写成 i 或者 v 都可以 , //后面的额id是数组的id,是不能随便写的,如果你数组里面写的是id,这里就写id,如果数组里面写的是num,那这里就写num , //=== 后面的id是你想要删除的元素的id号,同理,如果你数组里面写的是num,那这里...转载 2019-11-22 15:34:12 · 1524 阅读 · 0 评论 -
js图片加载完成前显示loading效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>loading</title></head><body> <img id="img"> <script> ...转载 2019-11-06 13:04:37 · 1981 阅读 · 0 评论 -
获取数组中最大值
获取数组中最大值原创 2017-09-13 09:45:55 · 2239 阅读 · 0 评论 -
js实现瀑布流布局
我个人不太喜欢这种布局、但需求还是有的、只能实现。查阅了资料找到两种方式:第一种:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>瀑布流布局</title> <style type="text/c转载 2019-02-14 09:43:42 · 685 阅读 · 0 评论 -
移动端滑动删除
演示DEMO:http://www.bright2017.top/test1/test1-33/代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="flexible" content="initial-dpr=2" /原创 2019-03-04 18:03:57 · 1061 阅读 · 0 评论 -
js上传图片
html: <form> <input type="file" value="上传图片" name="dataImg" class="choiceImages"/> </form>js:$(document).on('change','.choiceImages',function(){ let val=$("...原创 2019-03-22 09:45:54 · 197 阅读 · 0 评论 -
js点击页面其他地方,对目标进行操作比如隐藏div
$(document).on('click',function(e){ var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点,防止点击的是div子元素 if (elem.id &am...转载 2019-03-30 14:58:34 · 2123 阅读 · 0 评论 -
canvas生成图片并保存到手机上
Html<div class="canvasImagesd" style="margin: 0 auto;width: 300px;height: 400px;position: fixed;z-index: 9999;background-color: #ededed;display: none;"> <canvas id="canvas" styl...转载 2019-05-10 15:23:29 · 6808 阅读 · 2 评论 -
滴滴官网图片切换效果
演示Demo:http://www.bright2017.top/test1/test1-34/<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="flexible" content="initial-dpr=2" /> <me...原创 2019-05-13 16:27:44 · 420 阅读 · 0 评论 -
密码输入框
效果图:演示Demo:http://www.bright2017.top/test1/test1-35/<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>密码输入框</title> <style type="text/cs...转载 2019-06-26 10:50:01 · 361 阅读 · 0 评论 -
js编码解码,链接路径中传递中文参数
今天有个需求,路径传递的参数是中文的,截取了之后无法进行对比。所以需要用到编码和解码。1)编码encodeURI 路径传递参数之前进行编码 var city=$('.city').val(); var url='/home/Shop/shoplist/p/1.html/city/'+ encodeURI(city); window.locatio...原创 2019-10-11 18:12:37 · 988 阅读 · 0 评论 -
网页title标题文字移动
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>广州恒大 VS 广州富力|8K8足球直播 测试 -- test </title>转载 2019-02-06 19:43:34 · 641 阅读 · 0 评论 -
js实现图片懒加载
最近复习下js、简单实现一下图片的懒加载思路其实很简单:页面的img默认加载一张lodaing图片、速度会快一点、其他图片当显示在当前窗口的时候再获取data-src属性的值设置到图片的src属性当中加载图片。Demo:http://www.bright2017.top/test1/test1-32/<!DOCTYPE html><html> &l...原创 2019-02-06 18:34:53 · 400 阅读 · 0 评论 -
字符串和对象互转
json.stringfy()将对象、数组转换成字符串;json.parse()将字符串转成json对象。json.stringfy():语法: JSON.stringify(value [, replacer] [, space]) value:是必选字段。就是你输入的对象,比如数组,类等。 replacer:这个是可选的。它又分为2种方式,一种是数组,第二种是方法。 ...转载 2019-01-02 09:26:13 · 691 阅读 · 0 评论 -
定时器
定时器原创 2017-12-26 20:24:36 · 266 阅读 · 0 评论 -
js定时器实现图片的无缝轮播
js无缝滚动轮播图原创 2017-12-31 11:45:20 · 4187 阅读 · 0 评论 -
定时器实现文字的无缝滚动
文字的无缝滚动原创 2017-12-31 11:41:53 · 1213 阅读 · 0 评论 -
js检索字符串时,获取当前检索内容的全部索引
js检索字符串时,获取当前检索内容的全部索引原创 2017-10-16 13:21:25 · 5018 阅读 · 1 评论 -
js平均分割数组
js平均分割数组转载 2017-09-27 10:17:10 · 10106 阅读 · 0 评论 -
return,return true,return false三个的作用。
return false和return true 和return的作用。原创 2017-06-13 14:08:04 · 9123 阅读 · 0 评论 -
简易计算器
javascript运算符原创 2017-04-25 20:39:46 · 485 阅读 · 0 评论 -
for循环练习,乘法口诀表和三角形。
for循环复习原创 2017-04-25 16:49:11 · 1054 阅读 · 0 评论 -
倒计时6小时
倒计时原创 2017-04-24 17:14:21 · 1989 阅读 · 0 评论 -
原生js倒计时,距离51放假还有多长时间
原生js倒计时原创 2017-04-24 17:49:29 · 2015 阅读 · 0 评论 -
js指定日期倒计时,距离五一放假还有多久
js倒计时 距离今年五一放假还有: // 指定日期倒计时:距离五月一号还有多久 var obj = document.getElementById("clock"); var endTime = new Date(); //设置月份5月1号,参数1十月份,月份是从0开始,参数2是天 //不清楚的可以去看看 http://www.ru原创 2018-01-05 16:54:47 · 5358 阅读 · 0 评论 -
js随机数
js随机数 .centented{ width: 500px; margin: 0 auto; } button{ background-color: #0090FF; border: 0; border-radius: 4px; padding: 5px 10px; color: white;margin-top:原创 2018-01-15 17:20:26 · 393 阅读 · 0 评论 -
js生成指定范围的随机整数(例如0-100)
function random(min, max) { return Math.floor(Math.random() * (max - min)) + min;}for (var i = 1; i <= 100; i++) { console.log(random(0, 100));}转载地址:https://blog.csdn.net/SundayAaron/art...转载 2018-12-26 12:03:18 · 18030 阅读 · 0 评论