V________-CSDN博客

原创提问名单

let divEle = document.getElementsByTagName('div')[1];//获取显示人名的div//存储数据let arr = [ { name: '全部', info: 'a,b,c,d,e,A,B,C,D,E,1,2,3,4' }, { name: '一组', info: 'a,b,c,d,e' }, { name: '二组', i

2021-01-13 15:43:27 108

function suiji(min, max) { if (min > max) { [min.max] = [max, min]; } let i = Math.floor(Math.random() * (max - min) + min); return i;}function six() { let set = new Set(); while (true) { let i = suiji(1, 33);

2021-01-13 15:43:06 178

原创 bom基础知识学习

Bom(Browser Object Model)浏览器对象模型每打开一个浏览器,就会产生一个window对象(GO),所有BOM的顶层对象就是windowBOM分支1.screen(获取显示器尺寸,不包含任务栏)// 属性screen.availWidth // 显示器宽度screen.availHeight // 显示器高度2.navigator(获取浏览器信息)navigator.appName // 浏览器名称navigator.appVersion // 浏览器版本navig

2021-01-13 15:42:54 186

原创 js基础知识

1、数据类型number：数值型取值：整型、浮点型、NaN（is not a number）NaN和任何值比较都不相等（包括它本身）任何与NaN操作的结果都是NaN（除比较运算符，会输出false）Boolean：布尔型（两个值：true真，false假）适用场景：判断条件、状态值undefined：取值undefined（声明未赋值）让输出为undefined：声明未赋值输出；声明取值为undefined；未声明变量输出typeof 变量；2、数据类型转换a)强制类型转换书写格式：数

2021-01-13 15:42:36 92

原创强度判断

let spanEle = document.getElementsByTagName('span')[0];let inputEle = document.getElementsByTagName('input')[0];let divEle = document.getElementsByTagName('div')[0];let spanEle1 = [...divEle.children];inputEle.addEventListener('input', e => { le

2021-01-11 18:35:17 106

原创跳动的变色小球

let screenWidth = window.innerWidth;let screenHeight = window.innerHeight;let spanEle = document.getElementsByTagName('span')[0];spanEle.style.display = 'inline-block';spanEle.style.width = 50 + 'px';spanEle.style.height = 50 + 'px';spanEle.style.bac

2021-01-11 18:31:39 137

原创二级城市联动

let province = ["北京", "上海", "天津", "重庆", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "江苏", "浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "广西", "海南", "四川", "贵州", "云南", "西藏", "陕西", "甘肃", "宁夏", "青海", "新疆", "香港", "澳门", "台湾"]let cities = new Array();cities[

2021-01-11 18:28:31 115

原创淘宝详情放大镜效果

let dataArr = [{ small: "./images/imgA_1.jpg", middle: "./images/imgA_2.jpg", big: "./images/imgA_3.jpg"}, { small: "./images/imgB_1.jpg", middle: "./images/imgB_2.jpg", big: "./images/imgB_3.jpg"}, { small: "./images/imgC_1.j

2021-01-11 18:27:42 129

原创拖拽元素

let divEle = document.querySelector("div");divEle.style.width = 300 + "px";divEle.style.height = 300 + "px";divEle.style.backgroundColor = "skyblue";divEle.style.position = "fixed";divEle.style.left = 0 + "px";divEle.style.top = 0 + "px";divEle.styl

2021-01-11 18:25:24 89

原创简易弹幕

//获取随机数function getNum(min, max = 0) { min > max ? [min, max] = [max, min] : ""; return parseInt(Math.random() * (max - min + 1)) + min;}let divEle = document.querySelector("div");let inpEles = document.getElementsByTagName("input");inpEl

2021-01-11 18:24:12 90

原创星星评分

let textArr = ["很差", "较差", "一般", "满意", "非常满意"];let starEle = document.getElementsByClassName("star")[0];let textEle = document.getElementsByClassName("text")[0];//当前被点击的星星下标let imgIndex = -1;//生成星星function createStar(num) { let str = ""; for

2021-01-11 18:22:17 97

原创简易斗地主发牌器

/** * 1、生成54张牌(数字、花色) * 2、打乱54张牌 * 随机1个下标、获取牌 * 3、发牌 * 4、排序 *///生成54张牌function genPoker() { //基础数据 let pokerNum = [3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A", 2]; let pokerType = ["♦️", "♣️", "♥️", "♠️"]; let pokerKing = ["小王"

2021-01-11 18:13:41 205

原创可点击切换的轮播图

//【点击左右功能，圆点的设置与移动】let imgArr = ["./lunbopics/shutter_1.jpg", "./lunbopics/shutter_2.jpg", "./lunbopics/shutter_3.jpg", "./lunbopics/shutter_4.jpg"];let artEle = document.getElementsByTagName("article")[0];//初始化图片function init() { let imgEle = doc

2021-01-11 18:09:07 214

原创淘宝购物车

// 获取具体article节点let articleEle = document.getElementsByTagName('article')[0];articleEle.innerHTML = ` <div><img src="./tobaoimg/taobao_logo.gif" alt="淘宝网"></div><div> <span>您的位置</span> <span>首页</spa

2021-01-11 18:05:03 137

原创 dom基础学习

DOM：Document Object Model，文档对象模型。功能：操作HTML元素。document是页面视口的区域。节点(Node) nodename nodeValue nodeType元素节点标签名 null文本节点 #text 标签中文本内容属性节点属性名属性值注释节点 comments 注释内容注：nodename为大写，localname为小写。let navEle = ge

2021-01-03 21:29:10 99

原创正则表达式与预编译

十、正则表达式RegExp : RegularExpression判断字符串创建1、构造函数let re = new RegExp();console.log(typeof re, re);//object /(?:)/2、字面量书写格式：let re = / xxx /匹配模式;//如let re = / xxx /g;let re = / xxx /img;// g：global 全局查找// i：insensit 不区分大小写// m：multiline 多行匹配

2021-01-03 21:26:29 245

原创 js内置对象

九、内置对象String字符串长度 .length字符串转数组 .split("")拼接 str2.concat(str1).slice(m,n) 截取从第一个下标开始到第二个下标的前一位.substr(m,n)截取从第一个下标值开始，第二个值为截取个数.substring(m,n)会自动判断两个值的大小，然后截取从最小下标开始到最大下标的前一位；如果是负值会转换为0.startsWith()，.endsWith()判断字符串是否以某个字符（串）开始或结尾，要区分大小写.trim() 去除

2021-01-03 21:25:44 78

原创映射与json基础方法

七、映射与对象类似，但可以用非字符串当属性名创建：let xxx = new Map();通过set方法增加属性，get方法得到属性值let f72=new Map();f72.set('name','lyw');f72.set(1,'15');console.log(f72.get('name'));//lywconsole.log(f72.get(1));//15console.log(f72);//Map(2) { 'name' => 'lyw', 1 => '15' }

2021-01-03 21:24:29 394

原创 js对象学习基础

六、对象万物皆对象创建对象1、字面量创建let obj = {};2、构造函数let obj = new Object();对象初始化键：属性名值：属性值变量称为属性；函数称为方法let obj = { 属性名1 : 属性值1 , 属性名2 : 属性值2 , .. 属性名n : 属性值n}增删改查1、增加/修改对象名.属性名=xxx;对象名['属性名']=xxx; 因为属性名是一个字符串对没有的属性名，对象会自动创建一个然后输出undefined，然后立马

2021-01-03 21:23:13 110

原创 js函数基础学习

五、函数具有一定功能，封装成函数。【函数三要素】函数名参数（形参，实参）返回值声明函数1、字面量创建（声明式函数）function 函数名() {函数体}2、构造函数let 函数名 = new Function();console.log(typeof 函数名);//function3、函数表达式let 函数名1 = function 函数名2(){}函数名1();//匿名函数表达式let 函数名1 = function(){}函数名1();函数的调用：函数名(

2021-01-03 21:21:07 88

原创 js集合基础知识

四、集合可以存储多个数据，数据不重复（全等匹配）创建集合let set = new Set();集合的属性.size 即集合的长度集合的方法1、新增.add() 添加数据，会返回添加后的新集合（链式调用）let set = new Set();set.add(1).add(2).add(3).add(4);console.log(set);//Set(4) { 1, 2, 3, 4 }2、删除.clear() 清空集合.delete(删除的内容)3、查找.has() 返回

2021-01-03 21:19:42 158

原创 js数组基础知识

三、数组创建数组一个标识符可以存储多个数据，并且数据的类型可以不同。1、字面量let account1 = ["F72", "123", 2000, false];中括号里每个数据之间的分隔符为逗号，每个数据成为元素，每个元素都有自己在数组中的唯一索引（下标），我们可以通过索引（下标）来获取数据。下标起始值为0访问一个不存在的下标输出值为undefined2、构造函数let arr = new Array();3、区别字面量创建的数组解析速度更快原因：字面量属于JSON格式，JS引

2021-01-03 21:19:06 108

原创 js学习笔记

JS基本语句一、条件分支语句单分支if (判断条件){ JS代码块;}工作原理：判断条件为真，执行大括号里的代码块；为假不执行。双分支if (判断条件){ JS代码块1;}else{ JS代码块2;}工作原理：判断条件为真，执行大括号里的代码块1；为假执行else大括号里的代码块2。多分支if (判断条件1){ JS代码块1;}else if(判断条件2){ JS代码块2;}else if(判断条件n){ JS代码块n;}el

2021-01-03 21:17:53 88

原创 js学习笔记

解释性语言 JS、PHP 编译一行解释一行编译性语言 Java、C~ 编译完了在执行[程序设计步骤]1.软件计划2.需求分析设计3.软件设计4.软件开发5.软件测试6.运营与维护标识符的命名规范1.硬性要求A：可以是字母、数字、下划线、美元符号(不允许其他符号)B: 不能以数字开头C: 不能使用关键字和保留字D: 大小写敏感(即区分大小写)2.软性要求:望文知意命名方法1.大驼峰 NiQingRen2.小驼峰 niQingRen3.蛇形 ni_qing_ren4.匈牙

2021-01-03 21:01:34 92

原创 js数据类型的转换

//【数据类型的转换】//【Boolean类型转换】true 1 false 0//下列例子是比较运算符（会把左右内容转换数值）// let F70 = 1;// console.log(F70 == true); //true// F70 = “abc”;// console.log(F70 == true); //false/**[隐式转换]以下内容在转换布尔值时为false1、false2、0,-03、null4、undefined5、"",’’,``6、NaN*/

2020-12-01 20:13:05 122

原创运算符

//【运算符】//[一元运算符]/**原理：++在前，先自增，再使用/// let num1 = 1;// let num2 = ++num1;// console.log(num2:${num2}); //2// console.log(num1:${num1}); //2/*原理：++在后，先使用，再自增/// let num1 = 1;// let num2 = num1++;// console.log(num2:${num2}); //1// console.log

2020-12-01 20:12:45 246

原创猫眼APP共用样式sass

@mixin f_ce_ce { display: flex; flex-direction: row; justify-content: center; align-items: center;}@mixin f_be_ce { display: flex; justify-content: space-between; align-items: center;}@mixin f__ce { display: flex; al

2020-12-01 20:12:19 166

原创猫眼APP选座静态界面布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选座</title> <link rel="stylesheet" href="./CSS/reset.c

2020-12-01 20:11:42 387

原创猫眼APP影院静态界面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>影院</title> <link rel="stylesheet" href="./CSS/reset.c

2020-12-01 20:11:11 857

原创移动端根据界面宽度改变字体大小

!(function(win, doc) { function setFontSize() { // 获取window 宽度 // zepto实现 $(window).width()就是这么干的 var winWidth = window.innerWidth; console.log(winWidth); doc.documentElement.style.fontSize = (winWidth / 1080) *

2020-12-01 20:10:37 156

原创猫眼APP详情静态界面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>详情</title> <link rel="stylesheet" href="./CSS/reset.c

2020-11-30 15:30:32 269

原创猫眼APP热映

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshe

2020-11-30 15:23:08 127

原创猫眼APP注册界面布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册</title> <link rel="stylesheet" href="./css/reset.cs

2020-11-30 15:21:53 375

原创猫眼APP我的界面布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的</title> <link rel="stylesheet" href="./CSS/reset.c

2020-11-30 15:20:40 236

原创猫眼APP待映界面样式与布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshe

2020-11-30 15:18:18 234

原创猫眼APP登录页静态界面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <link rel="stylesheet" href="./CSS/reset.c

2020-11-30 15:14:57 1390

原创猫眼APP待映界面布局与样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshe

2020-11-30 15:09:31 171

原创猫眼APP静态界面布局，跳转与简单样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshee

2020-11-30 15:02:14 1101

原创猫眼APP静态界面布局与样式设定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshe

2020-11-30 14:39:05 327

原创猫眼APP静态界面布局与样式设定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshe

2020-11-30 14:35:03 194