BunnyMelody-CSDN博客

原创 Javascript 将类数组转为数组的几种方式

拿所有(非减头)函数种都可用的局部变量举例，arguments 对象就是一个类数组，它不是一个Array，类似于Array，但除了 length 属性和索引元素之外没有任何Array属性，比如 pop 方法。有如下方式将它转化为 Array。方式一var args = Array.prototype.slice.call(arguments);var args = [].slice.call(arguments);方式二// ES2015const args = Array.from(argu

2021-07-02 14:45:34 465

原创从零开始node全栈学习笔记

计划写一个node全栈的学习过程，不定期更新，因为不想给自己的定位只是前端开发，想多了解后端的学习。笔记最初是记在有道云笔记的，现在分享出来，如有问题可以请各路大神指点。首先需要一个服务器。使用远程登录工具(如x-shell或secure)登录终端：ssh username@ip输入对应的密码安装node参考链接因为我们使用的是ubuntu 16.04,采用先安装，后升级的方式。首先安装node

2017-12-11 11:05:10 2219

原创 js(借助jquery库)实现倒计时

不考虑样式，在此上一段 js倒计时的代码 function countDown(){ var time_now = new Date(); var time_end = new Date(2017, 0, 6,21,29,59);//月份记得减1 time_end = time_end.valueOf(); time_now = time_now.valueOf();

2017-01-05 11:55:30 762

原创 js中点击事件可能产生的闭包

相信很多同学在写js的时候都遇到过闭包的问题，让我们先来看一个背景介绍，有这样一组按钮，可能是成千上万个，他们需要一个点击事件来处理不同的情况，最暴力的办法是为每个按钮绑定一个事件，但这显然不是最佳的方法。那么最佳的方法是什么呢？假如他们每个按钮都有一个序号(我将这些按钮的id以升序排列，并存放在数组click_pops中，对应的button的id即为’#’+click_pops[i])，那么有

2016-12-17 16:52:50 3137

原创用css的border属性画三角形

在网上你可以随意搜到很多用css的border属性画的图形，比如面包屑导航、三角形等等，画这些图形可能结合了css的伪类:before 、 :after等，当然也可能没有，这并不影响我今天要分享的，当初作为新手的我看到这些代码觉得很神奇但并不能理解，今天，在相对理解的基础上我自己画出了这些三角形更是觉得神奇于是来分享。首先我们看一个三角形想象它是由一个正方形变来的，如何变呢，先来看看这个正方形

2016-11-03 14:25:45 2612

原创移动端开发实战经验

这是最近在移动端web-view中开发app时实际碰到的一些比较棘手显而易见的问题的小总结.首先说说问题的表现形式.有一天, 安卓开发人员拿来一部魅族手机, 给我展示了一下我写的html页面中出现比较奇怪的问题, 就是用highcharts画图画的图的高度变得十分诡异, 当时的表现是无限大. 然后也给我看了一些页面, 明明设计居中的元素并不居中了, 当下完全不知道是何原因, 一度怀疑是引入了r

2016-09-02 15:52:26 617

转载移动端开发rem单位的格式化js文件flexible.js

有关前端开发的移动端适配, 借助rem可以省去很多媒体查询的工作, 对于rem, 可以在css中做一些规定, 也可以直接通过js来控制, 这样, 更是最大程度的还原了设计图.以下代码为转载;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl =

2016-08-19 16:14:33 2752

原创移动端web开发的小笔记

移动端的开发跟PC端的开发还是稍有区别的，以下内容是个人移动开发的经验，后期会不定时更新错误以及新的内容一、从meta标签说起首先，在移动端，我们希望将页面窗口自动调整到设备宽度，需要的meta标签是这样 <meta name="viewport" content="width=device-width, initial-scale=1"/>为什么会有这个需求呢？为什么需要将页面窗口自动调

2016-07-11 11:23:23 604

原创 JS 实时获取鼠标所在坐标

js实时获取鼠标所在的位置。

2016-06-13 10:30:20 15200

原创 css实现垂直居中 + Yahoo前端优化十四条军规

css 垂直居中 Yahoo前端优化十四条军规

2016-05-16 12:02:22 819

原创 javascript 小知识(技巧、方法) ---面包屑导航文字上下滚动

面包屑导航文字上下滚动 js css

2016-05-16 11:37:36 1025

原创 javascript小方法之数组去重、数字转成逗号分隔、html元素去标签

一、数组去重 javascript数组去重，首先介绍一种时间复杂度比较高的方法，先给这个数组排序，之后再遍历数组，当遇到重复的元素时跳过即可。这个方法耗时的地方在对数组排序。下面介绍一种方法：function my_unique (txt) {//text是需要去重的数组 var res = [];//res是去重后的数组 var json = [];//这是一个局部变量

2016-04-04 17:02:32 2561

原创 JavaScript小知识之数据类型

JavaScript是弱类型语言。JavaScript的数据类型分为两类，原始类型和对象类型。JavaScript中的原始类型包括数字Number、字符串String、布尔值Boolean，它有两个特殊的原始值，null和undefined。简单说说null和undefined。null是JavaScript的关键字，表示一个特殊值，常用来描述空值。看下这个运算： >>typeof nul

2016-03-30 16:46:00 489

转载事件传播的三个阶段

事件传播的三个阶段第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。这种三阶段的传播模型，会使得一个事件在多个节点上触发。比如，假设div节点之中嵌套一个p节点。

2016-02-26 15:18:39 8395

原创 html + css + javascript 制作时间轴

在做很多小功能的时候，我们可能都需要时间轴，比如版本记录，或者一个流程的记录，简洁明了的设计会给人眼前一亮的感觉，如何大气简洁又能表述清楚呢，我这里有一个版本。当中的设计包括三角对话框的制作，我在上一篇博客中提过，圆形的制作，定位布局，也有可能，还需要一个回到顶部的功能。回到顶部如果不要求美观别致的话其实是一个相对容易的功能，我在这里的回到顶部也不是很华丽，代码类似这种：$('#scroll-to

2016-02-26 15:00:50 6531

原创 html+css制作带三角的矩形

网上有很多html+css制作带三角的矩形的方法，我在这里列举其中一种，兼容bootstrap3。我们先来看一个三角在左边的对话框的效果图矩形就不必说了，矩形的border-radius也不用说了，圆角可以自己设置，可以直接用bootstrap中的类。下面说下矩形左边的小三角，我们可以这么设置。右边的矩形我们标记为类log-content，左边的小三角我定义为类triangle，在html中的代

2016-02-26 14:36:34 4569

原创 jQuery实现侧边导航手风琴效果

侧导航的手风琴效果是指，点击含子层导航的父导航时，使原本隐藏的子导航显示，再次点击，子层导航又恢复隐藏，同时，同一时间只有一个父导航的子导航能够显示 $("#sidenav > li").find('.sub-nav').hide(); var ico = '<i style="float:right;font-size:12px;" class="glyphicon glyphic

2015-11-18 19:27:07 2044

原创 jQuery实现侧边导航点击隐藏动画设计

现在有这样一个需求，对于左侧的导航，当我点击导航的最上方时，原本显示的导航隐藏，再次点击后，隐藏的导航显示，以此反复，同时，在导航隐藏的状态下悬浮在导航的内容上时，导航也显示，当前状态下鼠标不悬浮在导航上时，导航恢复隐藏，其实是一个很简单的效果，但只有这样清楚的表达出来才能更好的实现，在这里用jQuery实现，给代码中出现的元素做简单说明，.sidebar-header指的是导航头，#left-si

2015-11-18 19:20:46 979

原创 bootstrap 三级导航

三级导航的实现方式有很多，javascript+css就能实现，很多人也写过相应的插件来专门实现这个效果，对于bootstrap来说，三级导航实现起来就很容易了，用bootstrap实现三级导航的另外一个优点是你可以简单修改样式自定义效果，如何做到呢？首先看一个简单的三级导航<nav class="navbar navbar-default navbar-fixed-top" role="nav

2015-11-18 19:01:08 23128 1

原创 CSS3 box-shadow

工作需要需要一个box-shadow效果，需要内阴影，且div的四周都要有阴影，对于CSS的box-shadow效果，有人说外阴影可以理解为从盒子的上方照下去投出的阴影，而内阴影则是从侧面照过去投出的阴影，这样想的话，就不难理解为什么设置内阴影的时候出现的效果一般都是left和bottom，或者top和right，在网上找的效果无外是这几种：如何做一个四周都有内阴影的效果呢？可以借鉴这种做法：.

2015-11-18 18:41:37 823

转载 JavaScript 闭包

闭包是JavaScript中非常重要的特性，看过很多讲闭包的，最近在Stoyan Stefanov著的一本 Object-Oriented JavaScript中看到的讲解觉得十分易于理解，在此分享下：现在，让我们先通过图示的方式来介绍一下闭包。首先是全局作用域，我们可以将其看做包含一切的宇宙。其中，可以包含各种变量(如a)和函数(如F)。每个函数也都会拥有一块属于自己的私用空间，用

2015-09-27 10:57:14 475

原创 JavaScript中，1=='1'?1==='1'?

首先看一段代码：<script type="text/javascript"> var num1 = 1; var string1 = '1'; if(num1 == string1){ console.log('num1 == string1') } else{ console.log('num1 != string1');

2015-08-24 10:53:08 2665

原创 JavaScript在IE下读写文件

做项目的时候有一次遇到一个问题，想用JavaScript读写文件来解决，就像C/C++那样，查阅了资料，发现浏览器中基本只有IE支持了，下面是JavaScript在IE下读写文件的代码<html> <input type="text" id="in" name="in" /> <input ty

2015-08-24 10:24:57 1935

原创 javascript数组去重

JavaScript数组去重有很多方法，今天要说的这个方法相比较而言性能较好，用两种写法展现。方式一：function my_unique (txt) { var res = []; var json = []; for(var i = 0; i < txt.length; i++){ if(!json[txt[i]]){ res.p

2015-08-24 10:09:57 415

原创 jQuery获取input值、select值、select文本

使用jQuery时如果不能区分jQuery对象和Dom对象，会常常它们对应的方法，笔者在工作过程中也是常常查阅资料加深记忆。jQuery获取input值：对应的html代码<input id="input_example" type="text" placeholder="此input example 用来获取input的value值"/>对应的jQuery代码var input_value

2015-07-13 19:50:21 2673

原创 javascript判断IE6 7 8 9

IE 8 和 IE 9两个版本的判定稍有不同<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>判断 IE版本</title> <script type="text/javascript"> if(navigator.userAgent.indexOf("MSIE")>0){

2015-05-30 21:26:01 1137

原创【jQuery】实现table单元格行合并

目标：从这样一张表中，合并相同元素为一列最终期待效果为：可以看到同一列中相同的元素被合并，这是怎么做到的呢，第一个想法是从每列的第一行数据开始遍历该列，当发现后一行数据跟前一行数据相同时删除该行同时给前一行的rowspan+1，但实际效果问题百出，为什么呢，是这样的，虽然后一行与前一行合并了，但是被合并行依然只占据它原本的位置，而被他合并的单元格的位置，则由各自同行的其他单元格取代它的位

2015-05-30 20:54:01 9741

原创给div设置滚动条

如果不特别设定，div在可视范围里是默认没有滚动条的，如何使其有滚动条呢，是这样，如果希望纵向有滚动条，即y方向有滚动条，那么高度值height就要限定，100%这样的值就不能够了，同时，要对这个div的overflow设置为auto，overflow可以分别对x轴和y轴设置<!DOCTYPE html><html><head> <meta charset="utf-8">

2015-05-30 20:39:11 702

原创 jQuery改变元素属性(宽、高)

此demo实现的功能是：当点击按钮时，元素动态改变了它的宽和高<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> div { position:absolute; background-color:#abc; left:50px; width

2015-05-30 20:31:56 2882

原创【jQuery】实现鼠标悬浮时DIV的收缩展开效果

有的时候我们需要这样一个效果，当鼠标悬浮在一个位置上时，这个悬浮事件会触发一个动画，jQuery实现的动画可以使得整体效果流程优美<!DOCTYPE html> <head> <title>jQuery实现DIV层的收缩展开效果-纵向</title> <meta charset="utf-8"> <script src="C:/jquery/jquery-2.1.4.mi

2015-05-30 20:25:15 18386 2

原创 css3 动画之 2D旋转 3D旋转放大

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2015-05-30 20:14:41 3024

原创仿海云天网站首页面

实现的动画效果: 1)文字上下循环定时滚动 2)文字左右循环滚动,悬浮时停止滚动 3)悬浮导航显示隐藏内容项目收获和问题 ①文字左右循环滚动时会隐藏部分内容 ②导航中隐藏的相应内容的显示不能完全同步效果图: 更多详细代码源文件请访问链接: http://download.csdn.net/detail/viciousdear/8609821 相应的javascript文件【nav.

2015-04-19 15:31:26 819

原创仿筑龙网站首页

项目效果更详细的项目文件及代码请访问链接:http://download.csdn.net/detail/viciousdear/8609725 项目中实现的动态效果有： 1》内容弹出悬浮显示 2》图片轮播 3》文字垂直翻滚 4》抽屉式折叠显示项目实现过程中的收获： ①为实现内容弹出悬浮显示置于顶层，设置了弹出图片的z-index为1，即使弹出层图片的display已设为none，

2015-04-19 13:39:04 911

原创 jQuery实现小功能之折叠

功能简介: 类似手风琴的折叠效果功能缺陷: 目标动态逐渐显示隐藏的段落, 但是现在的显示并不平滑功能效果: 【折叠.html】<!DOCTYPE html><head> <head> <meta charset="utf-8"/> <title>折叠</title> <link rel="stylesheet" href="折叠.

2015-04-16 09:44:42 1763 2

原创 jQuery实现小功能之鼠标悬浮时上下翻滚文字

【滚动.html】<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>滚动</title> <link rel="stylesheet" href="滚动.css" type="text/css"> <script type="text/javascript"

2015-04-15 19:35:38 1591

原创 jQuery实现小功能之弹出层

自定义插件实现弹出层【jqueryPopIndex.html】<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="jqueryPop.css"> <title>jquery 实现弹出层</title> <sc

2015-04-12 15:11:13 797

原创 jQuery 实现小功能之回到顶部

使用jQuery自定义插件进行功能拓展, 实现’回到顶部’这个小功能【backToTopIndex.html】<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>jQuery 实现回到顶部</title> <script type="text/javascript" sr

2015-04-11 15:11:25 589

原创图片轮播

图片切换原理: 在短时间内改变显示的图片的宽度项目特色: 1.图片可以自动浏览, 时间间隔为5s 2.点击图片左右的箭头切换图片 3.点击图片下方的圈圈切换图片项目知识点： 1.页面布局 2.点击响应 3.动画实现项目优点：通过代码获取li数组，可移植性好。动画实现原理：项

2015-03-26 21:29:31 503

原创前端作品仿2015/3/21百度首页面

因兴趣和学习需要, 用html/css/javascript写了百度首页面部分代码,其中,首航栏中的登陆弹出功能为借鉴只做了登陆设置更多产品的链接, 本地使用chrome IE6验证, win7系统页面效果: 【baidu.html】<!DOCTYPE html><html> <head> <meta charset="UTF-8">

2015-03-21 13:36:59 2833 3