OileDie-CSDN博客

原创 Git命令使用

获取远程仓库的新分支以及删除远程仓库已删除的分支git fetch -p查看远程分支、本地分支、创建分支git branch // 查看本地分支git branch -r // 查看远程分支git branch -a // 查看所有分支git branch -a 还能看到删除后的分支git remote update origin -p查看仓库地址git remote -v...

2019-12-17 10:20:22 130

转载 JavaScript 30 Day -- 17 使用reduce进行时间累加

实现效果：计算video的总时间。关键点：1.取得所有li中data-time属性的值，将时间换算为秒并累加求得总时间（单位：秒）;2.手动计算将总时间转化为新的格式“XX小时XX分XX秒”;3.将结果显示在页面上。javascript console.info(parseInt(1.99)); var oli = document.querySelectorAll('li');

2018-01-03 13:55:22 328

转载 JavaScript 30 Day -- 16 数组的去前缀排序

实现效果：为一组字符串数组，去除前缀进行排序。关键点：1.声明去前缀函数，使用String.replace()函数实现，第一参数使用字面量正则表达式。function delPrefix(item){ return item.replace(/^(The|A|An)\s{1}/,''); }2.使用Array.sort()对数组进行排序，将数组中逐项使用delPrefix

2017-12-29 16:52:20 322

原创播放flv/rtmp视频和HLS视频

播放FLV/RTMP视频<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="videoJs.css"> <script type="text/javascri

2017-12-29 13:56:55 5105 1

原创筛选

var sourceData = res.data; //你获取到的数组var arr = []; //创建新的数组for (i = 0; i < res.data.length; i++) { // console.log(res.data[i].start_date); if(res.data[i].start_date.indexOf($("#id").val()) !=

2017-12-29 13:47:22 168

转载 JavaScript 30 Day -- 15 文字阴影

实现效果：文字阴影的鼠标随动效果关键点：1.在script标签中，我们使用3个变量，一个指向div元素，一个指向其子元素h1，最后一个变量factor用于标记阴影距离h1中心的距离和鼠标距离h1中心距离的比例，用于计算阴影的具体位置。2.在hero元素上监听鼠标移动事件mousemove，并添加事件处理的回调函数shadowMove.hero.addEventListener('mousemove

2017-12-29 13:43:14 215

转载 JavaScript 30 Day -- 14 LocalStorage

实现效果：使网页模拟菜单的效果，在页面中添加新的菜品，而且在页面刷新之后也不清空。关键点：Event event.preventDefault //阻止默认行 eventTarget.addEventListener //事件监听localStorage localStorage.setItem() //储存在浏览器上 localStorage.getItem

2017-12-28 15:31:38 132

转载 JavaScript 30 Day -- 13 JS中的引用与复制

实现效果：这个部分主要是帮助你通过不同的语句来感受在 JavaScript 中对不同类型数据的引用（Reference）和复制（Copy）的区别。由于操作在 Console 中进行，所以请直接运行页面后打开 Console，边编辑代码，边查看结果。关键点：首先从 String、Number、Boolean 类型的值开始。let age = 100;let age2 = age;console

2017-12-25 14:26:23 150

转载 JavaScript 30 Day -- 12 图片的滑入滑出

实现效果：页面中的文章有几张配图，随着页面上下滚动，图片位置划过图片一半时，图片从两侧滑入；图片位置离开可见区域时，图片向两侧滑出。、关键点：涉及控制图片的 CSS 属性： translateX 来控制左右移动 scale 来控制缩放涉及页面尺寸的属性： window.scrollY 文档从顶部开始滚动过的像素值 window.innerHeight viewpo

2017-12-25 11:34:44 283

转载 JavaScript 30 Day -- 11 键盘输入的验证

实现效果：完整输入了“暗号”（一串事先定义好的字符串）时，触发一个事件关键点：指定可激发特效的字符串监听并获取输入的字符处理输入，在符合条件时，触发事件html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Key Detection</title> <!-- <script type="

2017-12-21 14:10:51 152

转载 JavaScript 30 Day -- 10 自定义视频播放器

实现效果：可以控制视频的播放速度和音量大小，可以快进/快退。关键点：为 video 元素添加自定义样式的播放控制面板可滑动调节音量、播放速度可通过按钮快进、回退可点击视频画面或按钮播放或暂停视频播放可点击或拖动进度条选择视频播放进度、video 对象的各种属性、方法和事件 paused //检查视频是否已暂停 play() //播放

2017-12-21 12:54:30 403

转载 JavaScript 30 Day -- 09 Shift 的多选功能

效果实现：提供按下 Shift 键后进行多选操作的功能。关键点：获取所有的 <input> 元素，并添加事件监听const inpts= document.querySelectorAll('.inbox input[type="checkbox"]'); || var inpts = document.querySelectorAll("input"); inpts.forEach(box =

2017-12-20 14:54:58 207

原创时间转换

// 转换时间Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "

2017-12-19 13:33:43 223

转载 JavaScript 30 Day -- 08 Console 调试技巧指南

实现效果：Console 面板里的调试技巧关键点：.log 的更多用法这个是最常用的，但它还有一些更多功能：比如参数支持类似 C 语言的字符串替换模式。%s 字符串%d 整数%f 浮点值%o Object%c 设定输出的样式，在之后的文字将按照第二个参数里的值进行显示console.log("输出一个字符串 %s ", "log");console.log("输出一个整数是 %d "

2017-12-15 11:05:53 180

转载 JavaScript 30 Day -- 07 彩虹画笔

实现效果：可供鼠标画画，颜色呈彩虹色渐变，画笔大小同样呈渐变效果。关键点：Canvas：基本属性 getContext() strokeStyle //线条描边的颜色 fillStyle //填充的颜色 lineCap //笔触的形状，有 round | butt | square 圆、平、方。 lineJo

2017-12-15 10:19:44 195

转载 JavaScript 30 Day -- 06 Array

实现效果：这一部分主要是熟悉 Array 的几个基本方法。关键点：console.table（） //按照表格输出filter（） //过滤 --筛出运行结果是 true 的组成数组返回map（） //map 形象的理解就是，把数组中的每个元素进行处理后，返回一个新的数组。sort（） //排序reduce（） //这是一个归并数组的方法，它接受一个函数作为参数（这个函数可以理解成

2017-12-14 16:04:16 189

转载 JavaScript 30 Day -- 05 快速匹配

实现效果：在输入框中输入一个词，迅速匹配，展示含有这个词的诗句，诗句的来源 json 数据是加载页面时从网络中异步获得。关键点：Promise fetch() //异步请求 then() json()Array filter() //过滤器 map() push() //添加 join() Spread syntax 扩展语句Re

2017-12-14 15:03:50 139

转载 JavaScript 30 Day -- 04 可伸缩的图片墙

实现效果：点击任意一张图片，图片展开，同时从图片上下两方分别移入文字。点击已经展开的图片后，图片被压缩，同时该图片上下两端的文字被挤走。关键点：display: flex flex-direction justify-content align-itemstransform: translateX/translateYelement.classList.toggl

2017-12-14 11:09:17 269

转载 JavaScript 30 Day -- 03 CSS Variables

实现效果：用 JavaScript 和 CSS3 实现拖动滑块时，实时调整图片的内边距、模糊度、背景颜色，同时标题中 JS 两字的颜色也随图片背景颜色而变化。css *{ margin: 0; padding: 0; } :root{ /*--color: #000;*/ --spacing:10px; --blur

2017-12-14 10:57:25 143

转载 JavaScript 30 Day -- 02 时钟

实现效果：时钟关键点：获取时间 var data = new Date() 获取小时/分钟/秒 date.getHours(); date.getMinutes(); date.getSeconds();

2017-12-14 10:47:57 158

转载 JavaScript 30 Day -- 01 JavaScript Drum Kit

实现效果：模拟一个打鼓的页面。用户在键盘上按下几个键时，页面上与字母对应的按钮变大变亮，对应的鼓点声音响起来。关键点：键盘事件-监听(addEventListener) 当按下键盘的时候触发 transitionend 必须要有transition transform这两个css属性获取对应的键document.querySelector(audio[data-key="${e

2017-12-14 10:36:38 208

原创手机验证码60s等待

html:<div class="input"> <input class="tel input_all" type="text" name="tel" placeholder="手机号"></div><div class="input huoqu"> <input class="yzm input_all" type="text" name="code" placeholder

2017-06-14 09:39:16 411

原创手机号码验证

html:<input id="kphone" type="tel" maxlength="20" placeholder="请输入请求对象的手机号" onchange="numberID()"><span id="ktip"></span>JavaSript://获取手机号var kphone = document.querySelector("#kphone");var ktip = do

2017-06-14 09:30:35 428

吃桑果的柯基