js基础
Kingsaj
这个作者很懒,什么都没留下…
展开
-
百度地图使用
官网效果: <div class="aboutMap"> <div id="container"></div> </div>// 引入地图依赖 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&a原创 2021-11-22 12:00:45 · 300 阅读 · 0 评论 -
JavaScript 中如何判断对象是否为空
地址原创 2021-11-16 15:15:31 · 615 阅读 · 0 评论 -
随机字符串,生成时间戳
原创 2021-08-12 16:06:46 · 284 阅读 · 0 评论 -
js -- 禁止右键点击浏览器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>禁止右键点击<原创 2021-07-09 15:35:20 · 260 阅读 · 0 评论 -
js -- Console 对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>console对象.原创 2021-07-08 16:21:18 · 95 阅读 · 0 评论 -
js -- 闭包案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>闭包案例</t原创 2021-07-05 10:04:40 · 163 阅读 · 0 评论 -
github上比较好的项目模板
react-boilerplate 地址ant-design-pro 地址vue-element-admin 地址react-starter-kit 地址create-react-app 地址原创 2021-07-02 15:01:06 · 484 阅读 · 0 评论 -
前端项目目录结构
结构一├── build # 构建相关├── mock # 项目mock 模拟数据├── plop-templates # 基本模板├── public # 静态资源│ │── favicon.ico # favicon图标│ └── index.html # html模板├── src .原创 2021-07-02 14:44:12 · 3952 阅读 · 2 评论 -
滚动顶部插件
<!doctype html><html><head> <meta charset="utf-8"> <title>滚动顶部插件</title> <style> .side_toolbar { position: fixed; right: 0; bottom: 26%; text-align: center; width: 90px; overflow: hidden;.原创 2021-06-27 12:03:37 · 78 阅读 · 0 评论 -
js --倒计时案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取验证码 bind()使用</title></head><body> <button>获取验原创 2021-06-24 23:00:45 · 56 阅读 · 0 评论 -
js-apply(),call(),bind()用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js-apply(),call(),bind()用法</title></head><body> <.原创 2021-06-24 10:35:56 · 72 阅读 · 0 评论 -
js -- ES5数组的常用方法
<!-- * @Description: * @Author: Wang Shun * @Date: 2021-04-21 11:55:38 * @LastEditTime: 2021-06-23 11:21:25 * @LastEditors: Wang Shun--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v原创 2021-06-23 11:23:19 · 185 阅读 · 0 评论 -
javascript实现超级玛丽奥游戏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE>马里奥 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""&g原创 2021-06-21 14:46:30 · 329 阅读 · 0 评论 -
promise 的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>promise使用</title></head><body> <script> const原创 2021-06-20 00:17:51 · 75 阅读 · 0 评论 -
js -- 实现拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js实现拖拽</title> <style> html, body { width: 100%; he.原创 2021-06-19 23:58:44 · 75 阅读 · 0 评论 -
PC门户项目复盘
PC门户项目复盘 1: 尽量仅使用单个css文件,使用 @import url(路径) 同一进行引入.减少http请求 2: 网站上所有小图标,务必使用字体图标,便于后期维护调整,杜绝使用小图片,减少服务器压力 3: PC项目尽量少使用flex,grid布局,多使用 float(浮动)布局, display: inline-block; 4: 页面能点击的地方,要有悬浮状态,点击状态 5: 包裹文字的元素,宽高尽量使用padding进行撑起. 如必须设置固定宽高,一定要要考虑到文字溢出情况,前.原创 2021-06-18 09:37:42 · 108 阅读 · 0 评论 -
js -- 最基础的提示框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>提示框</title></head><body> <button onclick="toolti原创 2021-06-17 14:53:37 · 68 阅读 · 0 评论 -
js -- 返回上一页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type=button .原创 2021-06-17 11:51:19 · 150 阅读 · 0 评论 -
js -- 验证是否为数字
/** * @description: 验证是否为数字 * @param {*} * @return {*} true 为数字,false 反之 * @param {*} value */ function isNumber(value) { var patrn = /^(-)?\d+(\.\d+)?$/; if (p...原创 2021-06-07 10:29:11 · 145 阅读 · 0 评论 -
utils.js 常用方法
var utils = { //获取链接参数值 urlQuery : function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]);原创 2021-05-23 11:44:30 · 968 阅读 · 0 评论 -
js--效验input 只能输入字母和空格
οnkeyup=“value=value.replace(/[^\w.\s/]/ig,’’)”<input type="text" name="eName" onkeyup="value=value.replace(/[^\w\.\s\/]/ig,'')" required lay-verify="required" placeholder="请输入英文名称" autocomplete="off" class="layui-input">..原创 2021-05-20 09:19:03 · 956 阅读 · 0 评论 -
js-- 字符串转数组,
// 字符串转数组(将字符串按某个字符切割成若干个字符串,并以数组形式返回),d.tag 是个字符串 '1,2,3' var _arr = d.tag.split(','); //在每个逗号处,进行分割 console.log(_arr); // ["1", "2", "3"] ...原创 2021-05-19 10:48:30 · 115 阅读 · 0 评论 -
js --节流函数
方法一 : 利用时间戳处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节流函数</title></head><body> ..原创 2021-05-16 23:10:57 · 224 阅读 · 0 评论 -
js -- 图片懒加载
使用js实现图片懒加载效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js实现图片懒加载</title></head><body&g..原创 2021-05-15 20:35:22 · 86 阅读 · 0 评论 -
js实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js实现tabs切换</title></head><style> li { .原创 2021-05-11 15:08:18 · 109 阅读 · 0 评论 -
js -- 数组转字符串,并去除空格
let arr = 【1,2,3,4,5】;arr.toString().replace(/,/g, “”); <div class="norm_content details" id="norm_content"> </div><script> // 获取路径url传递的参数 var obj = new URLSearchParams(location.search); var id = obj.get('docid'); .原创 2021-05-07 09:16:57 · 601 阅读 · 0 评论 -
js-- 验证输入的密码格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-04-14 17:19:03 · 1088 阅读 · 0 评论 -
js--显示隐藏密码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2021-04-14 17:07:39 · 174 阅读 · 0 评论 -
js -- 记住用户名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do转载 2021-04-14 16:57:31 · 159 阅读 · 0 评论 -
fastclick --处理移动端浏览器300毫秒延迟问题
fastclick插件使用.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">.原创 2021-04-14 16:44:35 · 149 阅读 · 0 评论 -
js -- 取余数
let _creativeList = ''; for (let index = 0; index < 11; index++) { // 根据项目情况: 我需要在这个循环中,根据index索引,获取要显示的图片名称. ['001@2x.png','002@2x.png'][index%2] 关键代码, 余数的得出的结果,只有 0 和 1 .对应索引 _creativeList += `<li> <a ...原创 2021-04-13 17:57:52 · 1759 阅读 · 0 评论 -
前端分页实现
思路: 发送请求获取全部数据一维数组,然后将一维数组转换成二维数组,点击分页切换的时候,取当前页的索引即可.案例使用:vue + element(Pagination 分页) 实现第一种方法实现:<template> <div> <h1>前端分页实现</h1> <ul :class="$style.infinite_list" v-infinite-scroll="load" style="overflow:auto"&g..原创 2021-03-27 17:26:18 · 232 阅读 · 0 评论 -
二维数组转为树形数据
需要处理的两个数组{ // 子类 "metas": [ [ "C-34-0009-0001", "连接器", "C34" ], [ "C-34-0011-0001", "配备1个连接", "C34" ], [ "C-34-0011-0002", .原创 2021-03-26 00:08:43 · 1128 阅读 · 0 评论 -
节流和防抖的区别,如何实现
防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则会重新计算时长实现思路:每次触发事件时设置一个延时调用方法,并且取消之前的延时调用方法缺点: 如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟 // 防抖debounce代码 function debounce (fn){ let timeout = null; // 创建一个标记,存放定时器 return function () { // 当用户输入的事件把前一个 setTimeout c原创 2021-03-23 18:18:34 · 131 阅读 · 0 评论 -
使用js将后台返回的数据转换成树形结构
需要引入 lodash 插件import _ from 'lodash'import systemData from '../layout/systemData' // 转换成树结构数据 transformToTree(arr) { const MAX_LEVEL = 5 const formatNode = (node, level) => { node.selectable = false if (le原创 2021-03-08 16:10:33 · 986 阅读 · 0 评论 -
js 获取当前日期, 时,分,秒
let d = new Date();d.toLocaleTimeString() // "下午6:07:33"d.toLocaleDateString() // "2021/2/22"原创 2021-02-22 18:09:53 · 149 阅读 · 0 评论 -
Promise解读
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Promise解读&原创 2021-02-19 11:42:34 · 67 阅读 · 0 评论 -
js 防抖函数应用场景及实现方式
/** * @param {Function} fn 防抖函数 * @param {Number} delay 延迟时间 */export function debounce(fn, delay) { var timer; return function () { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function () {原创 2021-02-01 15:17:31 · 184 阅读 · 0 评论 -
input radio取得被选中项的value值
Jquery 获取选中值,三种方法都可以:$(‘input: radio:checked’).val();$(“input[type=‘radio’]:checked”).val();$(“input[name=‘sex’]:checked”).val();原生js获取方法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>input radio选中状态<原创 2021-01-29 18:33:16 · 1889 阅读 · 0 评论 -
验证form 表单,是否填写内容
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>form 表单验证</title> <style type="text/css"> form { width: 888px; margin: 0 auto; background-color: #fffae8; } </style> <原创 2021-01-29 13:47:18 · 456 阅读 · 0 评论