那个方-优快云博客

原创 javaScript攻克轮播图之轮播图完整步骤

javaScript轮播图由三小部分组成:1.底部按钮悬停显示对应图片2.左右按钮点击跟换图片3.定时器滚动更换图片首先是css的基本样式:&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style type="text/css&quo

2019-01-14 21:34:43 2196 8

转载 Css3 ，权重，属性选择器，伪类选择器，文本阴影，边框

css3Css3 是Css2 的“进化”版本, 在Css2 基础上,增强或新增了许多特性,弥补了Css2 的众多不足之处,使得 Web 开发变得更为高效和便捷.权重Css 权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。权重的等级1、!important，加在样式属性值后，权重值为 100002、内联样式，...

2019-04-18 00:19:47 345

转载【面试】web前端经典面试题试题及答案-vue

vue的生命周期beforeCreate（创建前）在数据观测和初始化事件还未开始created（创建后）完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted（载入后）在...

2019-04-14 21:34:46 562

转载正则表达式速记口诀

正则表达式口诀及常用正则签于网上太多的介绍都是一篇凶悍的短文，边看边理解可以，帮助记忆不行。又受五笔字型字根表口诀“白手看头三二斤…”的启发，试作“正则表达式助记口诀”又名“正则打油诗”，版本0.1，绝对原创，仿冒必究，：）注：本文仅为学习正则时为了便于记忆而作，不能代替系统而全面的学习过程，错漏之处，敬请指正！正则其实也势利，削尖头来把钱揣；（指开始符号^和结尾符号KaTeX pars...

2019-04-13 00:53:26 1780

转载这些被喷的 JS 代码风格你写过多少？

一、变量相关（1）变量数量的定义NO：滥用变量:let kpi = 4; // 定义好了之后再也没用过function example() { var a = 1; var b = 2; var c = a+b; var d = c+1; var e = d+a; return e;}YES: 数据只使用一次或不使...

2019-04-11 23:49:16 167

原创 C3H5 3d立体魔方效果

<!DOCTYPE html><html><head> <title>立方体</title> <meta charset="utf-8"> <style> .da{ width: 200px; margin:100px au...

2019-04-10 23:56:30 229

转载五星好评

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padd...

2019-04-07 21:02:30 389

转载 webpack起步打包问题

一.确保已经安装了nodeJS之后.二. 创建webpack-demo,我的是f盘下的,2.然后进入这个文件夹:3.进行初始化,一路都是选择默认(回车就可以):查看初始化后的文件夹,里面只有一个json文件:4. 装webpacknpm install webpack --save-dev安装完成，查看项目5.然后用编译器打开当前项目,我的是HBuilder,如下图:在这个文件下...

2019-04-04 08:56:36 185

转载【Web API 教程】—SVG 图像

1、概述SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。<!DOCTYPE h...

2019-04-01 00:13:59 305

转载 echarts柱状类似进度条样式

>var arr={}arr.fhId = "demo_echarts_fh";//负荷的idarr.fhArr=[ {"name":"10kv金羊线","value":"10"}, {"name":"10kv金海线","value":"20"}, {"name":"10kv金东线","value":"30"}, {"name":"10kv金澳线","value":"45"},...

2019-03-29 23:04:06 2111

转载 canvas高级验证码

直接上代码，canvas与原生实现的高级验证码，无法复制选中拖拽以及获取标签内元素来获取验证码的值.function showCheck(){var c = document.getElementById(“myCanvas”);var ctx = c.getContext(“2d”);ctx.clearRect(0, 0, 1000, 1000);//需要引用的字体库请各位亲们自行下...

2019-03-28 20:45:45 141

转载 Java Web 登录页面的实现

<html><script type="text/javascript">function inUser(){ username_mess.style.visibility="visible";}function outUser(){ //获取name 为 usesrname 的文本 u=f1.username.value; ...

2019-03-28 20:40:58 1274

原创 20 个 CSS 高级技巧汇总

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate {filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter:...

2019-03-25 19:54:35 117

原创 JavaScript Prototype(原型) 新手指南

引言：如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。在这篇文章中，您将了解用于实例化新对象的各种模式，在此过程中，您将逐步深入了解 JavaScript 的原型。基础入门如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。事实上，学习如何...

2019-03-25 19:50:50 269

原创【JavaScript 教程】标准库—String 对象

1、概述String对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。var s1 = ‘abc’;var s2 = new String(‘abc’);typeof s1 // “string”typeof s2 // “object”s2.valueOf() // “abc”上面代码中，变量s1是字符串，s2是对象。由于s2是字符串对象，s2.valu...

2019-03-14 21:08:40 139

原创【JavaScript 教程】标准库—Math 对象

Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。1、静态属性Math对象的静态属性，提供以下一些数学常数。Math.E：常数e。Math.LN2：2 的自然对数。Math.LN10：10 的自然对数。Math.LOG2E：以 2 为底的e的对数。Math.LOG10E：以 10 为底的e的对...

2019-03-14 00:15:51 208

原创【JavaScript 教程】标准库—Boolean 对象

概述Boolean对象是 JavaScript 的三个包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象实例。var b = new Boolean(true);typeof b // “object”b.valueOf() // true上面代码的变量b是一个Boolean对象的实例，它的类型是对象，值为布尔值true。注意，false对应的包装对象实例，布尔运算结果也是tr...

2019-03-11 21:26:30 150

原创【JavaScript 教程】标准库—Number 对象

1、概述Number对象是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用。作为构造函数时，它用于生成值为数值的对象。var n = new Number(1);typeof n // “object”上面代码中，Number对象作为构造函数使用，返回一个值为1的对象。作为工具函数时，它可以将任何类型的值转为数值。Number(true) // 1上面代码将布尔值t...

2019-03-11 01:15:25 223

原创 canvas圆弧绘制

圆弧绘制弧度概念arc()x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束角度anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）绘制文本ctx.font = ‘微软雅黑’ 设置字体strokeText()fillText(text,x,y,maxWidth)text 要绘制的...

2019-03-07 21:05:27 196

原创 h5新增表格标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form acti

2019-03-03 20:00:32 544

原创 CSS3之背景缩放

背景缩放(CSS3)通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。其参数设置如下：a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多c) 设置为contain会自动...

2019-02-28 20:45:21 1799

原创 css3之过渡

过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指）...

2019-02-28 00:05:11 111

原创 CSS的23个垂直居中技巧

网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直居中技巧当成面试题，其重要性可见一斑。在不断探索，发现中，CSS的垂直居中的方式竟然能达到23种，大家可以看看自己熟知的是哪几种？1、Line-height适用情景：单行文字垂直居中技巧这个方式应该是最多人知道...

2019-02-24 23:40:22 130

转载《你不知道的JavaScript》：理解js原生函数

本篇来看下js中的原生函数，也叫内置函数。主要包括如下：String()Number()Boolean()Array()Object()Function()RegExp()Date()Error()Symbol()原生函数可以被当作构造函数来用，但其构造出来的对象与设想的有区别，以String()为例：var s = new String(“abc”);console.l...

2019-02-21 21:15:02 187

原创元宵节趣味灯谜

元宵之夜，大街小巷张灯结彩。赏花灯、猜灯谜、吃元宵，这些都是必备选项。元宵的热闹就如“袨服华妆着处逢，六街灯火闹儿童”，情人的倩影好似“蛾儿雪柳黄金缕，笑语盈盈暗香去”，而所有“月上柳梢头，人约黄昏后”的约定，都离不开“灯火阑珊处”的痴心等待。今天给我们可爱的程序员，出了点小灯谜，是只有程序员才能看到懂的，你都会么？程序员猜灯谜老会计喝二锅(打一热门技术) — 云计...

2019-02-19 20:43:29 377

原创趣味js之斗牛算法详解

大家新年好,在过年的这段日子里,本人过的是非常的不错,可以说是吃的饱,睡的好,正所谓酒足饭饱,打打牌,出门走亲戚,不免饭后打打牌,毕竟小赌怡情,今日学习了一下斗牛,交了不少学费,于是抱着先了解,后深入的精神,研究了一下关于斗牛的基础算法,看完之后,发现十赌九输还是有一定道理的,function getRandom() {return parseInt(2 + (9 - 2 + 1) * Ma...

2019-02-18 18:36:42 3449 3

原创 js高级面向对象之贪吃蛇具体思路详解

第一步:分析把贪吃蛇这个游戏当做一个对象,他又由一下部分组成:1.小蛇;2.食物;3.游戏背景(地图)同样我们将这三部分也当做三个对象,逐个分析,对它们添加自己的属性和方法,因为地图比较简单只需要设置样式即可,就不做分析,分析顺序按照难度从易到难来分析;(形参皆为游戏对象后期传进去的属性)一,食物(1)属性function Food(width, height, color) {...

2019-01-23 14:36:00 2369 1

原创 js高级面向对象之表格点击排序

面向对象是js的必修部分,关于此部分是否熟练运用也是重中之重,今天写了个关于面向对象的案例,比较有意思,是关于一个表格的排序,触发事件是点击thead的每个th会对表格进行一般排序由于所有的东西都是js动态添加,所以html部分的代码只有一个table,就不发了css代码如下: table { width: 800px; } ...

2019-01-22 20:07:48 443

原创 js高级之祝福墙

今天写了个关于js高级中的祝福墙的小案例![<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0 auto; padding:

2019-01-21 19:22:47 382

原创 javaScript之购物车

今天写了一个购物车基础功能的js,分享给大家看一下,具体效果自己可以复制了看看,词穷形容不出来 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>  &

2019-01-20 23:06:51 235

原创 javaScript高级之贪吃蛇

今天初学javaScrip高级,课后想尝试着去把贪吃蛇案例解决了,本来想着就算做不出来也全当增加经验,结果一不小心给做出来了了,其中有些思路也是借鉴别人的,但是既然是借鉴,懂了就是自己的了,总的来说贪吃蛇案例坐下来大概三个半小时左右,比较综合,适合初学者拿来练手!(直接上代码,注释都写了,能懂就懂,不懂别强求!)<html lang="en"><head> ...

2019-01-17 22:09:23 243

原创 javaScript攻克轮播图之阿里云动画案例

今天闲来没事做看了一样阿里云的网站,发现了一个很好玩的东西,起初以为是gif图,看了下控制台之后发现是一个javaScipt的动画效果,于是抱着探索的精神尝试着去模仿了一下,结果出乎意料的容易,开心之余将方法分享给所有人.(因为本人不会发动图,所以具体效果可以去原网站了解),图片可以在原网站控制台获取"TB1ceKWLXXXXXaEapXXXXXXXXXX-150-9000.jpg"是其中一个阿...

2019-01-16 21:09:44 397

原创 javaScript动画函数的封装

function animateBian(element, json, fn) {clearInterval(element.timeId);element.timeId = setInterval(function () {var flag = true;for (var attr in json) {if (attr == “opacity”) {var current = par...

2019-01-15 21:18:52 145

原创 java攻克轮播图之深度了解偏移量

偏移量offsetParent用于获取定位的父级元素offsetParent和parentNode的区别var box = document.getElementById(‘box’);console.log(box.offsetParent);console.log(box.offsetLeft);console.log(box.offsetTop);console.log...

2019-01-14 21:35:05 474 1

原创 javascript轮播图之添加事件及其兼容代码

//为元素绑定事件//对象.addEventlistener("事件的类型","事件的处理函数"false)ie8不支持//参数1:事件的类型--->事件的名字,没有on//参数2:事件的处理函数--->匿名函数和命名函数//参数3:布尔值,目前写默认值false//对象.attachEvent("有on的事件类型","时间的处理函数"),谷歌,火狐不支持//为同一个...

2019-01-10 21:47:11 214

原创 javascript攻克轮播图之定时器

定时器setTimeout()和clearTimeout()在指定的毫秒数到达之后执行指定的函数，只执行一次// 创建一个定时器，1000毫秒后执行，返回定时器的标示var timerId = setTimeout(function () { console.log('Hello World');}, 1000);// 取消定时器的执行clearTimeout(timerId)...

2019-01-09 21:24:51 324

原创 javascript攻克轮播图之悬停显示

关于悬停显示类似于选项卡代码如下:{ Title 语文数学外语计算机请选择科目 }

2019-01-08 19:51:35 402 3

原创 JavaScript攻克轮播图之onload

js中的onload事件，有两种写法。1.放在body中Hello World!意思上当body标签加载完毕之后，执行onload后面gender那个load函数。2.放在script标签中。&amp;amp;lt;script&amp;amp;gt; //onload 当页面加载完毕执行, 页面的标签创建完成并且页面依赖的外部文件都下载完毕 window.onload = function ...

2019-01-07 18:02:55 229

原创 JavaScript攻克轮播图之style.left与offsetLeft的区别

今天写完作业实在无聊,看着页面上面毫无灵魂的轮播图(不会动)感觉十分差劲,于是翻开了之前写的京东案例,想根据最近学的js基础尝试着完善之前写过的轮播图代码,看懂了个大概,关于函数和逻辑方面略懂了一些,但是到最后还是没有完全理解下来,虽然图片有了灵魂(可以动);但是并不是有趣的灵魂(有很多bug);试问这样的灵魂有何用.郁闷了半天,顺便调戏了半天度娘,结果度娘就是度娘,就跟你娘一样,东西是很多,但都...

2019-01-06 22:32:14 437

原创 js中String对象的常用方法和属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/xiaobing_hope/article/details/52461005String对象的方法：charAt(); charCodeAt(); indexOf(); match(); replace(); search(); slice(); toUpperCase(); toLowerCas...

2019-01-03 18:08:07 429 1

空空如也

空空如也