2019 年 12月随笔档案 - 养乐

bootstrap 框架里的下拉菜单+按钮

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta 阅读全文

posted @ 2019-12-31 08:21 养乐阅读(668) 评论(0) 推荐(0)

数组的方法(2)

摘要：8.slice：方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。同样不会对原数组改变 let arr12 = [24, 3, 6, 8, 7, 9]; //省略第二个参数end 会一直拷贝到数组结尾处的元素 let res 阅读全文

posted @ 2019-12-30 08:17 养乐阅读(169) 评论(0) 推荐(0)

总结一下常用的JS数组方法

摘要：1.map ：遍历数组的每一项并对其进行操作。有返回值且不改变原数组。 var arr = [1, 2, 3, 4, 5, 6]; var res = arr.map(item => { return item * 2; }); console.log(arr); //[1, 2, 3, 4, 阅读全文

posted @ 2019-12-29 11:17 养乐阅读(246) 评论(0) 推荐(0)

JS中数组实现 ——— 倒序遍历数组，数组连接字符串

摘要：// 求最大值 <script> var arr = [10,35,765,21345,678,89]; var max = arr [0]; for (var i=0;i< arr.length;i++) { if (max<arr[i]){ max = arr [i]; } } console. 阅读全文

posted @ 2019-12-28 15:35 养乐阅读(1942) 评论(0) 推荐(0)

javascript 的基础（理论知识）

摘要：01、JavaSript有哪些垃圾回收机制？标记清除（ mark and sweep ) 这是JavaScr i pt 最常见的垃圾回收方式。当变量进入执行环境的时候，比如在函数中声明一个变量，垃圾回收器将其标记为“进入环境” 。当变量离开环境的时候（函数执行结束），将其标记为“离开环境”。垃圾回收阅读全文

posted @ 2019-12-27 08:45 养乐阅读(298) 评论(0) 推荐(0)

使用强大的 CSS 滤镜实现安卓充电动画效果

摘要：用安卓手机的同学肯定不陌生，这个是安卓手机在充电的时候的效果。看到这个我就很好奇，使用 CSS 能做到吗？经过一番尝试，发现使用 CSS 也是可以很好的模拟这种动画效果：知识点拆解一下知识点，最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个阅读全文

posted @ 2019-12-26 08:54 养乐阅读(720) 评论(0) 推荐(0)

巧用 CSS 实现酷炫的充电动画

摘要：画个电池当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。方法很多，代码也很简单，直接看效果：有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的阅读全文

posted @ 2019-12-25 09:31 养乐阅读(587) 评论(0) 推荐(0)

在JavaScript中，++在前和++在后有什么区别

摘要：一、++可以与输出语句写在一起，++写在变量前和写在变量后不是一个意思++ i 和 i ++ 区别在于运算顺序和结合方向。在JavaScript中有两种自加运算，其运算符均为 ++，功能为将运算符自加 1。其中：++ VAR 被称为前自加，其后面的变量执行自加操作，其运算为，先执行自加操作，再引用阅读全文

posted @ 2019-12-24 13:28 养乐阅读(3417) 评论(0) 推荐(0)

JavaScript主要特点：

摘要：javascript脚本语言的主要特点： 1、解释性：javascript是一种解释语言，源代码不需要经过编译，直接在浏览器上运行时被解释。 2、基于对象：javascripth是一种基于对象的语言，能运用自己已经创建了的对象，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 3、事件驱动阅读全文

posted @ 2019-12-23 08:28 养乐阅读(3630) 评论(0) 推荐(1)

css 重点知识和 bug 解决方法

摘要：1.图片向下撑大3像素问题在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1 给图片添加display:block； 1.2 给图片添加 float:left； 1.3 给图片添加 vertical-align:middle; 1.4 给他的父元素加font- 阅读全文

posted @ 2019-12-22 16:37 养乐阅读(164) 评论(0) 推荐(0)

（理论知识+HTML+CSS+JavaScript）

摘要：今天分享的面试题的答案不确保一定正确，如有错误或有更好的解法，大家可以留言分享你的答案。我在留言区等你更好的答案。一、理论基础知识部分 1.1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端阅读全文

posted @ 2019-12-21 16:48 养乐阅读(391) 评论(0) 推荐(0)

原生js放大镜效果

摘要：效果： 1、鼠标放上去会有半透明遮罩、右边会有大图片局部图 2、鼠标移动时右边的大图片也会局部移动放大镜的关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步；页面元素：技术点：事件捕阅读全文

posted @ 2019-12-19 18:50 养乐阅读(228) 评论(0) 推荐(0)

JavaScript Math 对象

摘要：Math 对象 Math 对象用于执行数学任务 // 使用 Math 的属性和方法的语法： var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); 注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，阅读全文

posted @ 2019-12-18 08:30 养乐阅读(169) 评论(0) 推荐(0)

JS-for循环练习题

摘要：1、大马驮2石粮食，中马驮1石粮食，两头小马驮一石粮食，要用100匹马，驮100石粮食，该如何调配？ //驮100石粮食，大马需要50匹 for(var a=0;a<=50;a++){ //驮100石粮食，中马需要100匹 for(var b=0;b<=100;b++){ //驮100石粮食，只需要阅读全文

posted @ 2019-12-17 13:28 养乐阅读(3005) 评论(0) 推荐(0)

javascript---简介的切换图片效果。

摘要： <img src="img/9.gif" alt="" id="img"> <button onclick="prev();"> < </button> <button onclick="next();"> > </button> <script>// 获取到 img var 阅读全文

posted @ 2019-12-16 13:48 养乐阅读(165) 评论(0) 推荐(0)

在项目中常用的JS方法封装

摘要：使用方法简单，只需要放在你的 utils.js 工具文件中，直接export const 加上下面封装方法，在别的文件中使用 {方法1，方法2，方法3...}引用后直接使用即可。 01、输入一个值、返回其数据类型 type = para =>{ return Object.toString.call 阅读全文

posted @ 2019-12-15 15:25 养乐阅读(414) 评论(0) 推荐(0)

大家一起来突击下前端知识的盲区（2）

摘要：js数据类型：基本类型：string、number、boolean、null、undefined 引用类型：object、array、function 判断数据类型的方法： 1、typeof 优点：能快速区分基本数据类型。缺点：不能将object、array、null 区分，返回都是object 阅读全文

posted @ 2019-12-14 19:32 养乐阅读(132) 评论(0) 推荐(0)

大家一起来突击下前端知识的盲区（1）

摘要：1、css 盒模型： CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 box-sizing: content-box（W3C盒模型，又名标准盒阅读全文

posted @ 2019-12-13 09:22 养乐阅读(165) 评论(0) 推荐(0)

随机点名器

摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; 阅读全文

posted @ 2019-12-12 20:06 养乐阅读(257) 评论(0) 推荐(0)

JS---DOM---为元素解除绑定事件

摘要：解除绑定事件： 1、解绑事件对象 .on 事件名字=事件处理函数》绑定事件。对象 .on 事件名字 = null 。注意：用什么方式绑定事件，就应该用对应的方式解除绑定事件。 //1 对象.on事件名字=事件处理函数绑定事件 my$("btn").onclick = function () 阅读全文

posted @ 2019-12-11 18:52 养乐阅读(2056) 评论(0) 推荐(0)

求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。例如2+22+222+2222+22222。

摘要：方法一： var num = ""; var nums = []; var a = Number(prompt());//所要拼接的数字 var b = Number(prompt());//所要拼接的位数 for(var i = 0; i < b; i ++){ num += a; nums.pu 阅读全文

posted @ 2019-12-10 18:45 养乐阅读(1411) 评论(0) 推荐(0)

整理几个经常在H5移动端开发遇到的东西。

摘要：本篇主要是我个人的学习分享。 1、弹出数字键盘  <input type="tel">  <input pattern=“\d”> 安卓、IOS的表现形式应该不太一样，大家可以动手试试。运用正则之后，就不用关注input 的类型了。阅读全文

posted @ 2019-12-09 15:44 养乐阅读(169) 评论(0) 推荐(0)

前端常用的css代码

摘要：1、垂直居中对齐 .vc{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .vc{ position:absolute; top:50%; left:50%; width:100px; height:1 阅读全文

posted @ 2019-12-07 19:54 养乐阅读(247) 评论(0) 推荐(0)

使用 sroll-snap-type 优化滚动

摘要：scroll-snap-type：属性定义在滚动容器中的一个临时点如何被严格的执行。简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何处理滚动结束状态。语法： { scroll-snap-type:none | [ x | y | block | inline | bot 阅读全文

posted @ 2019-12-06 20:29 养乐阅读(550) 评论(0) 推荐(0)

css 知识点，你有可能不知道欧!

摘要：1、【定位特性】绝对定位和固定定位，同时设置left和right等同于隐式的设置宽度。 <style> span{ position:fixed; left:30px; right:30px; border:1px solide #000; } </style> <span></span> 2、【阅读全文

posted @ 2019-12-05 17:37 养乐阅读(133) 评论(0) 推荐(0)

wbr 标签实现连续英文字符的精准换行你知道吗？

摘要：1.一般情况下的换行： word-break:break-all或者word-wrap:break-word <p>大家<wbr>想要<wbr>实现<wbr>换行吗？</p> 如果是非连续英文字符，<wbr>需要与white-space:nowrap配合使用才有意义。 <wbr>不能与word-br 阅读全文

posted @ 2019-12-03 16:59 养乐阅读(208) 评论(0) 推荐(0)