自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(29)
  • 资源 (1)
  • 收藏
  • 关注

原创 Vue 3.0 Beta 尝鲜体验

2020年4月vue3.0发布beta版本,这就意味着正式版本3.0即将到来。发布的内容包括下面的内容:vue: Betavue-router: Alphavuex: Alphavue-class-component: Alphavue-cli: Experimental support via vue-cli-plugin-vue-nexteslint-plugin-vue: Alphavue-test-utils: Alphavue-devtools: WIPjsx:

2020-08-27 14:16:02 837

原创 我的TypeScript笔记

去年换工作去参加其他公司面试,很多公司都问你会ts吗?了解ts吗?,第一家问的我一脸蒙蔽样,很老实的我回答说我不知道没有了解过,面试官一副鄙视样很受打击,回来之后我就网上查询搜索ts,搜索出来的原来ts是TypeScript ,是javascript的超集,所有使用JavaScript实现的东西TypeScript都能实现, TypeScript现在用的已经很广泛了,无论你使用n...

2019-05-09 10:56:39 609 1

原创 流式布局flex学习

现在都很流行流式布局display:flex;,但是就是老是记不住他们的类型,今天抽空梳理咯一下父元素与子元素的他们各自拥有的属性(红色部分是我经常使用到的)父元素拥有的属性1、flex-direction   设置主轴对齐方式 row(默认值):主轴为水平方向,起点在左端。   row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。...

2018-12-14 14:11:55 1268

原创 模拟支付宝支付

以前在我没有编写设置支付密码的时候,以为这种效果(js)很好实现,结果当我做的时候布局到时很简单,可是在用js的时候弄的我一个头是两个大。第一次我是用一个input框,然后设置input的最大长度为6,然后用letter-space设置间距,和设计图例的样式完全不对不说,每一次输入到最后一个的时候,input框文字始终要往前面退一格。第二次写的时候我是设置6个input密码框,忽略到咯手机

2017-02-14 15:29:20 2616

转载 推广一个良好的拼接带格式字符串的方法

带格式是指,像普通的HTML文档一样,有缩进,有换行,有空格,这种字符串更便于阅读。大家拼innerHTML的时候,巴不得越容易阅读越好。JS拼字符串,一般喜欢用+。如果想要很多行拼在一起,且方便阅读,一般的做法是:123456789101112var s = ''    + ''    +''

2017-02-08 16:42:20 562

原创 css3百叶窗效果

经常我们在浏览一些网页的时候可能都会看见一些很酷炫的特效,比如百叶窗效果。以前的大多都是js写出来的,但是自从css3出来之后,我们也可以用css代码直接实现百叶窗效果。唉美中不足就是ie9以下不支持我们这个很炫的效果,这时你可以用js实现兼容性。js实现今天我们就暂且不谈,我们谈一下css3吧。要制作纯CSS的百叶窗效果,HTML结构是个关键。在html结构中,需要使用多幅相同的图片来组织一

2017-01-11 16:03:23 9057

原创 loading css3动画

现在很多的网站网页在加载的时候都有一个加载的动画标识,有些事用gif动画图片,有些使用存css3写的,还有一些是使用js实现的,今天我就来用存css3来写一个加载的动画效果。该效果使用咯css3的transform 里面的scale(缩放)、rotate(旋转)、translate(位移),还使用了css3的动画keframes    animation。思路:1.定义一个大盒子,来装

2017-01-05 17:15:43 524

原创 插件封装(banner)

这个插件是在上一个的基础是进行封装的,这个插件支持水平切换和垂直切换.这里是插件结构;(function(){    //定义插件名称。方便后面调用    $.fn.pluginName = function(options){//options 经常用这个表示有许多个参数。        var defaults = {};//设置一些默认值        //这里就是把

2017-01-03 15:42:28 1554

原创 封装轮播插件

以前写网页遇到轮播的时候,要么是引用别人已经封装好的插件(但是别人分装好的存在在很多大量的代码冗余),要么就是慢吞吞的自己写js,有时候写的布局不一样又要从新写一个js,自从我学习咯写封装的juqery方法之后,我就在自己尝试着封装js,这样以后写的时候我直接把他拉过来,然后修改初始默认值就行。 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。;(function($

2016-12-26 20:05:30 3191 1

原创 倒计时、计算时间

哈哈,最近我们公司在做双十一的优惠活动项目,现在距离双十一还有几天,所以我们需要做一个倒计时的功能,很荣幸的我完成咯这项艰巨而伟大的任务,以前我在做Date()的时候老是把getDay( )(一周中的某一天)、getTime()(返回1970年1月1日至今的毫秒数)、getDate()(返回一个月(0-31)之间的某一天)记混淆,但是自从我把这个做咯以后,我就已经明确知道他们之间的意义咯,再也不会

2016-11-09 15:45:20 2859

转载 canvas绘制可爱猫咪

有没有萌到你呢?

2016-11-09 15:22:20 2046

转载 Less学习收获

LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!变量很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:

2016-10-10 15:07:25 399 1

原创 js拖拽效果

平时遇见过很多页面上的某一些元素可以跟随鼠标的移动而移动,我觉这个效果特别的好玩,然后我就自己试着写咯一下这个效果,我写的效果页面是一个很简单的,我就定义咯一个div元素,然后鼠标按下去的时候 拖动鼠标,物体就会跟随我鼠标移动而移动,当鼠标放开的时候,物体就停止移动。首先我们在一个页面上添加一个div  ,然后给他加上一些修饰的样式。

2016-09-12 15:56:36 664 1

原创 canvas (smile)

今天我在学习html5新增加的标签——canvas 画布,他像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。    context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法

2016-08-29 16:16:47 455

原创 css3 animation(loading)

看见别人些的加载的动画,觉得特别炫酷,然后我也试着自己写咯一个,这个动画是用的纯html 和 css3写的。思路:      1、先定义一个大盒子,转需要用的元素      2、对需要做动画的标签进行定位操作     3、用css3实现你要的表情效果      其他的废话就不多少咯,具体请看下面的代码,不明白的地方,随时都可以call 我html代码:

2016-08-24 15:37:39 1060

原创 transform-style ~ animation (css3星环运动)

transform--style属性指定嵌套元素是怎样在三维空间中呈现。值描述flat子元素将不保留其 3D 位置。preserve-3d子元素将保留其 3D 位置。  然后我就自己用这个属性写咯一个比较炫的星环动画。html代码:

2016-08-19 11:20:19 780

转载 JS正则表达式总结

正则需要传参时,必须使用new RegExp();var re = new RegExp('\\b'+sClass+'\\b');-------------------------------------------------------------量词,转义字符:\s : 空格\S : 非空格\d : 数字\D : 非数字\w : 字符(字母

2016-08-17 15:02:48 438

转载 jQuery自己编写插件()

引言:  在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除...此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可是要追寻高大上的90后有为青年呢~可是该如何高大上呢?这时jQuery自定义插件开发来了,第一次听到插件开发觉得如此happy,遂动手网上查找资料进行学习,如下,我用自己的语言

2016-08-16 16:19:19 9185 2

转载 10个超棒jQuery表单操作代码片段

jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!如果你也有相关的代码,请大家积极分享! 代码片段1: 在表单中

2016-08-09 14:39:52 364

转载 微信网页添加分享到朋友圈、发送好友JS代码

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。 微信内嵌浏览器通过 Mac 远程调试 iPhone 上微信自己的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJ

2016-08-09 14:04:53 3513

原创 鼠标移动3D翻转动画特效

好久没有更新文章咯,今天我为大家带来一个酷炫的3D翻转特效效果例子(该效果是用的纯html+css3实现的哦)特别指示:1、用到咯;perspectivea) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。2、transform-style

2016-08-04 14:21:52 2650 4

原创 css3制作正方体

今天学习transform的时候突然奇想,想写一个正方体,然后我就跟着我的想法,写咯一个,该正方体是全部用的html5+css3实现的,只要用transform 里面的rotate(旋转)、translate(位移)等,多的就不说咯,具体的看代码,html代码如下: 1 2 3 4 5

2016-07-26 16:36:20 1291

转载 深入理解CSS过渡transition

通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义  过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timi

2016-07-25 16:08:36 4671

转载 干货满满,绝不错过,DOM、BOM 操作超级集合

本章内容:定义节点类型节点关系 选择器样式操作方法style表格操作方法表单操作方法元素节点ELEMENT属性节点attributes文本节点TEXT文档节点 Document位置操作方法定时器弹出框location其它事件操作实例 定义文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。 节点

2016-07-20 16:55:21 1497 1

原创 (莲花绽放)animation

今天我在学习transation 时在网上看见一个网友写的莲花绽放很炫,我也试着写咯一下,效果如下所示html代码: -->css代码:body{background-color: #d4d4d4; height: 100%; overflow: hidden;} .bo

2016-07-20 16:47:11 972

原创 floor random 随机抽奖

今天我在学习javascript的random 和 floor的时候想起用这个两个来写一个简单的随机抽奖页面。写出的效果如下所示:点击开始抽奖的时候上面红色部分的奖品会随机变化,点击停止的时候就显示你抽中的奖品是什么,做个其实很简单的,但是首先还是要把思路理清楚,那样写起来就不觉得那么难。1、首先要定义一个数组,里面放置奖品清单,2、在两个按钮上设置点击事件(点击过后注意按

2016-07-19 15:21:48 839

原创 轮播图

以后我觉得那些封装轮播的大神很牛逼,所以为咯节约时间和成本,我们大多用都是别人已经封装好的,但是里面包含咯许多我们不需要的代码,这样就会产生代码冗余,所以今天我也试着自己来写一个,当我写完之后,我发觉原来轮播图也不是那么的难的,写的时候一定要先分析,然后才开始着手,这样的话思路才会清晰明了。要点分析:1、首先要在父容器里设置相对定位,图片的容器设置绝对定位。2、除了第一张外的图片都隐藏

2016-07-15 10:53:26 754

原创 瀑布流布局

很早以前我就想自己学写一下瀑布流布局,可是由于懒神来找我聊天咯,所以推迟咯很久直到今天我才来写瀑布流布局。由于鄙人的js还有很大的提升空间,所以我是先看咯一下那些大神的具体讲解和分析,然后才开始着手写的,收获那是杠杠的。

2016-07-13 15:09:08 593 1

原创 html+css+js 动态时钟

今天我在学习css3的时候,无意间在一个博客好友的文章里看见咯一个纯代码写出的动态时钟,我觉得很有确,我就试着按照他的思路分析自己写咯一个,不过我写的和他写的还是有区别的,他的好些元素是用js创建的,而我的是直接在html代码里面添加的,练习的过程中,我把以前我不懂怎样使用原型平均分裂div学习到咯,代码如下: var radius = 180;//大圆半价    var

2016-07-13 11:11:15 18790 2

html+css+js clock钟表

动态时钟 body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原点*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指针 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*时钟数*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;} <div class

2016-07-13

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除