一只顾小白-优快云博客

原创事件小案例

打字机<body> <div id="app"></div> <script> let app = document.querySelector('#app') let str = '大家好，我叫***，我是一个单身的程序猿，我很惨，我没有女朋友,大家救救我吧' let i = 0 setInterval(() => { if (i < st

2020-09-24 19:07:32 167

格式元素名.事件名称=function(){ 执行的操作}其中function()里有一个参数e，打印e会看到事件里的各种属性## 鼠标常用事件名称含义onclick()单击鼠标ondblclick()双击鼠标oncontextmenu()右击鼠标onmousedown()鼠标按下onmouseup()鼠标抬起onmouseenter()鼠标移入onmouseleave()鼠标移出onmousemove()鼠

2020-09-24 15:24:00 695

原创 Dom中新增和删除标签

创建一个新的标签<body> <div class="app">ace</div></body>现在页面上有一个div标签，我想要在这个div标签里用js再创建一个标签。创建标签用createElement() ，同样也要用一个新的变量来接收它<script>let div = document.createElement('div')div.innerHTML = 'simba' //添加内容div.classList.

2020-09-22 18:58:11 703 1

原创 Dom中的选择器

DOM（Document Object Model）文档对象模型在js中要获取一个元素，可以用类似于css3中的选择器来获取一个html页面就是一个文档，也就是document不常用使用的html代码段<a href="./BOM.html"></a> <div id="app">simba <div class="demo">sjjsj</div> <div class="demo"&gt

2020-09-22 12:15:38 826

原创 js中call()、apply()、bind()方法（学习整理）

let obj = { nickName: "ace", say(a, b, c) { console.log('hi,i am ' + this.nickName); console.log(a,b,c); } } let zz = { nickName: 'simba' } obj.say.cal.

2020-09-17 09:48:03 154

原创 js中的this

let obj = { nickname: 'simba', introduceSelf() { console.log(`你好我叫${this.nickname}`); return function () { console.log(`早上好，我叫${this.nickname}`); } }

2020-09-16 17:26:57 190

原创 js闭包

//闭包函数两个函数嵌套，内部函数引用了外部的变量，则内部函数为外部的闭包函数 function a() { let i = 0 function b() { i++ return i } return b } let b = a() console.log(b);

2020-09-16 15:58:08 81

原创 js构造函数

构造函数（首字母要大写）构造函数this指向创创建出的对象或实例function Chess(name, color, x, y) { //这里定义了一个名为Chess的构造函数 this.name = name this.color = color this.position = {} this.position.x = x this.position.y = y

2020-09-16 15:17:02 155

原创 js对象

对象 object类 class类是对象的抽象对象是类的实例化字面量方式定义对象，格式为let obj={ key:value,key1:value}let zhangsan = { username: '张三', age: 20, gender: '男', hobbies: ['篮球', '唱跳'], eat: function () {

2020-09-09 17:38:20 247

原创 js函数(2)

箭头函数let a = (aa, bb) => aa + bb等价于function a (aa,bb){ return aa+bb}自执行函数只执行一次(function () { console.log(111111111); })()//回调函数：讲一个函数作为参数传入到另一个参数中执行//高阶函数:参数为函数或者返回值为函数的函数成分为高阶函数 let a = function () {

2020-09-09 16:58:57 123

原创 js函数(1)(学习整理)

函数的定义定义方法 function sayHi() { console.log('hello world'); } let sayHello = function () { console.log('hello'); }** 函数定义（一定要先定义后调用）** function sayHi() { console.log('hello world'); } let sayHello = funct

2020-09-09 14:46:13 151

原创 JS内置对象Date() （学习整理）

let now = new Date() console.log(now);//打印当前日期 console.log(now.getFullYear());//打印年 console.log(now.getMonth() + 1);//打印月（月份要+1） console.log(now.getDate());//打印日 console.log(now.getHours());//打印小时 console.lo.

2020-09-02 20:04:05 209

原创 js字符串（学习整理）

let str = 'Hello world' //定义一个字符串里面存放Hello world console.log(str.toUpperCase()); //字符串转大写 console.log(str.toLowerCase()); //字符串转小写 console.log(str.length); //字符串长度 for (let i = 0; i < str.length; i++) { console.log(str[i]); //遍历字符串的每一个字

2020-09-02 19:10:37 417

原创 JS数组（学习整理）

js数组数组的定义：一段连续的有序的数据集合变量大的盒子可以通过下标（索引）来访问数组创建方式1. let arr = new Array() //构造函数创建数组对象2. let arr = [] //字面量方式创建数组对象数组的遍历 let arr = ['张三', '李四', '王五'] for ( let i = 0; i < arr.length; i++) { console.log(arr[i]); console.log(

2020-09-02 17:24:39 146

原创 JS内置对象Math（学习整理）

内置对象Math <script> console.log(Math.pow(2, 3)); //2的3次方 console.log(Math.floor(3.14)); //向下取整 3 console.log(Math.ceil(3.14)); //向上取整 4 console.log(Math.round(3.4)); //4舍5入 3 console.log(Math.round(3.5));//4舍5入

2020-09-02 17:05:55 152 1

原创 HTML/CSS 变形（盒子水平垂直居中）、过渡、动画（学习整理）

变形transform:scale(*)>1放大 0-1缩小 <1基于中心点对称transform:rotate(？deg)deg(度数）正值-顺时针旋转负值-逆时针旋转transform:skew(？deg)扭曲效果transform:translate(？，？)平移第一个值为x轴平移距离第二个值为y轴平移距离使用translate让盒子水平垂直居中 <style> .fa

2020-08-29 16:37:57 632

原创 HTML/CSS父元素flex布局（学习整理）

flex弹性布局display:flex 设置内部内容为flex布局flex-wrap：wrap(换行) nowrap(不换行) flex子元素换行flex-direction:row(默认横向) column(竖向) flex布局方向align-items:center(垂直于主轴居中)justify-content:space-between均匀等分在盒子里，并且两边没有空格space-around均匀等分在盒子里，并且两边有空格cent

2020-08-29 15:30:42 366

原创 vscode设置背景透明度

首先在左侧搜索windows opcity 出现的第一个就是然后安装一下文件-首选项-设置找到win opacity… 右边的210就是我设置的透明度（数字越大越不透明，数字越小越透明，可以根据自己的需要修改）...

2020-08-29 15:13:55 5039 3

原创 HTML/CSS盒子浮动、定位、隐藏(省略号）（学习整理）

浮动float常用float：left（左浮动） right（右浮动）解决父元素塌陷问题的方法（很多情况下父级盒子不给高度，考虑子盒子高度会变）给父元素一个固定的高度在父元素中子元素的最后添加一个div子元素，并且设置其样式为clear：both给父元素添加css样式 overflow:hidden伪类设置：在父元素中设置 <style> div ::after{ content: ''; display: bl

2020-08-29 14:50:58 757

原创 HTML/CSS盒子模型（学习整理）

边框borderborder-width: 边框宽度border-color: 边框颜色border-style: 边框样式 solid(实线) double(双实线) dashed(虚线)还可以分别设置四条边的border属性border属性border-right-width/style/colorborder-left-width/style/colorborder-top-width/style/colorborder-bottom-w

2020-08-27 14:02:46 142

原创 HTML/CSS列表，表格，表单（学习整理）

列表<style>ul{ list-style:none; } </style>清除ul前面的默认样式一般写代码时不需要前面的数字或者图形ul无序列表<body> <ul> <li>苹果</li> <li>西瓜</li> <li>葡萄</li> <li>榴莲</li&g

2020-08-27 11:24:33 840

原创 HTML/CSS中文字，文本，图片及背景图设置（学习整理）

文字样式-font-family:字体<style> div { font-family: '宋体'; } </style> 设置字体为“宋体”font-style:字体样式<style> div { font-style: italic; } </style> 设置字体样式为倾斜font-weight

2020-08-27 09:53:41 2242

原创 HTML/CSS选择器（学习整理）

CSS样式写的位置行内样式例如<div style="color: red;">aaa</div>直接写在标签内的样式为行内样式内部样式<style> @import url('CSS文件所在位置'); </style>外部样式<link rel="stylesheet" href="css文件所在位置">常用外部样式引入引入方式优先级（就近原则）：行内>内部>外部选择器

2020-08-26 20:07:20 148

原创我的HTML/CSS入门

我的HTML/CSS入门Html：超文本标记语言（切记不是编程语言不是编程语言不是编程语言）我使用的软件： Visual Studio Code (VScode)部分常用快捷键：刷新浏览器 ctrl+F5关闭当前页面 alt+F4快捷复制 alt+shift+下箭头部分选择 shift注释代码 ctrl+/快速生成对应标签标签名+Tab<-------------------------------------------------------------------

2020-08-26 19:03:14 147

Eliauk的博客