万花果子-优快云博客

原创 javascript 时间转换整理

/** * 生成具体日期时间 * @param timestamp 时间戳 * @type yyyy-mm-dd hh:mm:ss */ createTime(timestamp){ var date = timestamp ? new Date(timestamp) : new Date();//实例一个时间对象，timestamp无则是当前时间； ...

2019-10-31 17:22:21 157

原创 nuxt 跳转多级目录页面

当我们要访问的文件是在下级目录内的时候,路由的地址中间要用’-‘代替’/’如下<nuxt-link class="subNav-li" :to="{name:'mobile-taxi'}"></nuxt-link>这样就可以跳转了...

2019-09-30 15:15:53 1553

原创 WordPress 编辑器块引用美化

wordpress编辑器中的块引用不同主题样式不一样，有的达不到自己想要的效果，这时候可以在：外观->自定义->额外css 中加入自定义的css代码来达到自己想要的效果 .post blockquote { font: 14px/20px italic Times, serif; color: #888; padding: 1...

2019-09-25 22:58:33 928

原创前端简单处理input输入跨域攻击

对输入框的非法字符进行转译,来起到阻止输入<><>等非法字符的效果 window.onload = function(){//防止输入标签，造成跨域攻击 let tags = document.querySelectorAll("input"); for(let i=0;i<tags.length;i++){ tags[i].onblur = funct

2017-04-11 18:16:40 620

原创 js自定义滚动条

可直接使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义滚动条</title></head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滚动条</title><style

2017-01-25 10:20:06 518

原创 fis3 前端项目构建，一步步来

前端架构工具有很多，就我使用过的grunt，gulp，还有最近项目中应用的fis3来说，fis3的运行速度，灵活程度，应该叔最高的~反正现在已经习惯了使用fis3来快速搭建项目进行开发，下面一步步简单的使用fis3来搭建项目。 fis3的安装百度里有，很简单就能装好。一，基础配置 1.首先在项目的根目录下要有fis-conf.js这个配置文件，只有有这个文件，才能进行你想要的各种配置。

2016-12-28 17:41:04 2098

原创 js瀑布流，简单封装

一个很简单的瀑布流加载，当滚动条滚动到底部时自动加载，先代码敬上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title></head><style> li{ list-style: none; } .pinterest-wrap{

2016-12-19 17:08:24 450

原创浏览器关闭时弹出提示事件onbeforeunload

有时候在做数据编辑的时候，为了友好提示用户不小心关闭浏览器时，提醒用户是否已经保存数据，可以用onbeforeunload来处理；兼容谷歌，ie，火狐兼容性不好。代码如下： var UnloadConfirm = {}; UnloadConfirm.MSG_UNLOAD = "数据尚未保存，离开后可能会导致数据丢失\n\n您确定要离开吗？"; UnloadConfirm.s

2016-11-14 14:53:49 4365 1

原创 placeholder兼容到ie8

/** * 模拟placeholder * jQuery EnPlaceholder plug * EnPlaceholder是一个跨浏览器实现placeholder效果的jQuery插件 * version 1.0 * by Frans.Lee <dmon@foxmail.com> http://www.ifrans.cn * * 修正无placeholder显示un

2016-10-09 15:47:21 386

原创 opacity兼容ie8

兼容ie6-8的透明度问题.demo{ opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}

2016-10-08 15:36:36 1299

原创 weinre手机调试，给自己看的方便步骤

1.npm -g intall weinre2.weinre -httpPort 8081 --boundHost 192.168.20.723.需查看页面下加上<script src="http://192.168.20.72:8081/target/target-script-min.js#anonymous"></script>起服务，手机端进入网页直接查看

2016-10-08 13:41:38 734

原创常用手机uc浏览器兼容问题记录（陆续补充）

移动端的uc和微信被认定为手机端的ie6，从flex出世以来，移动端的布局使用flex真的是得心应手，各种布局问题得以简化，但是uc浏览器实在是业界一大毒瘤，不得不特别关照，下面列一下我再工作中遇到过的手机uc兼容性问题，做个归纳整理。 1. uc浏览器可以识别空格数据中如果加入了空格浏览器是不会自动过滤的，在自己的手机浏览器不会有这个问题，不过平时注意一下后台的数据处理的话，就不会产生什么影

2016-09-23 14:37:38 10287 1

原创文字两端对齐 text-align: justify;

很多时候我们想实现这样的自适应功能你好：xxxx 我是：xxxx 我们没有：xxxx2个文字前后自动两端对齐，来个栗子：移动端和pc端都能直接用<div class="mate-tit">哈哈</div>.mate-tit { width: 1.4rem; text-align: justify; height: 25px; color: #333333;}

2016-09-09 14:24:17 765

原创 JavaScript调用pc和手机摄像头

主要是pc和手机的浏览器可以调用，亲测可用，但是微信扫二维码则不可以，微信的话应该还是要调微信接口<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>GetUserMedia实例</title> </head> <body> <video id="vide

2016-08-17 09:09:45 8074 1

原创关于同一页面多个swiper-container会出现swiper-pagenation总数多出的问题

因工作的时候一个单页面里出现了三个滑动效果，2个需要加分页，于是我将swiper封装了一个功能单独做滑动，但是当引用swiper分页的时候总数会多一些，后来将每一个滑块单独新new一个swiper就可以解决那个问题了

2016-08-11 18:41:00 5058

原创 canvas编写简单七巧板

<body> <canvas id="canvas" width="800" height="800" style="margin: 100px auto;display: block;"></canvas></body><script type="text/javascript"> var canvas = document.querySelector("#canvas");

2016-06-20 20:50:42 1334

原创 js制作淘宝放大镜效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;

2016-05-23 19:35:50 1394

原创 js 一段代码获取元素class样式

function getStyle(obj, attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

2016-05-18 20:01:05 1682

转载 JavaScript事件冒泡简介及应用

作者：WebFlash 出处：http://webflash.cnblogs.com 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。一、什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或

2016-05-06 19:04:08 311

原创 js阻止冒泡事件小案例

<body> <div id="red" style="border:1px solid #000;width: 400px;height: 400px;"> <div id="blue" style="border:1px solid #000;width: 300px;height: 300px;"> <div id="pink" style="b

2016-05-06 18:53:12 394

原创简单js遮罩效果，弹出注册界面

<head> <meta charset="UTF-8"> <title>遮罩</title> <style> * { margin: 0; padding: 0; } #shade{ position: absolute; widt

2016-05-05 20:19:26 1134

原创 js 悬浮导航

<head> <meta charset="UTF-8"> <title>悬浮导航</title> <style> * { margin: 0px; padding: 0px; } ul li{ list-style: none; }

2016-05-05 19:18:47 378

原创 setAttribute 和 getAttribute 的设值和获取方法

<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var setBtn = document.getElementById("set"); var ge

2016-05-04 16:56:54 1032

原创 JavaScript 复选框全选和反选

<body> <div> <input type="checkbox" name="" id="chose" value="" /> <input type="checkbox" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> </di

2016-05-04 15:54:25 503

原创 JavaScript setInterval方法执行函数失效

function say(){ alert("sss")}setInterval(say(),2000);这么写函数setInterval将直接执行say（）函数，应该讲代码改为function say(){ alert("sss")}setInterval("say()",2000);//或者"say()"改为say这样就行了

2016-05-04 10:56:02 9166 1

原创 JavaScript 不用eval制作简易计算器

<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none;

2016-05-03 21:48:15 2088 2

原创 JavaScript 定时器制作一个弹窗小广告

<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; positi

2016-05-03 17:19:31 890

原创 JavaScript 过滤，压缩重复字符串

1.压缩相同字符串var str = "aaabbbbbcccaaa"; //数据源//按照顺序压缩var compare = str.charAt(0);// avar comparStr = "";var count = 1;for (var i = 1; i < str.length; i++) { if (str.charAt(i) == compare) {//i =1

2016-04-29 11:36:03 1082

原创 JavaScript数组过滤相同元素

var arr = [1,2,2,4,3,6,7,6,8,5,5,5];function delSameElement(arr){ var newArr = []; for(var i = 0;i< arr.length;i++){ mark = 0; for(var j=0;j<newArr.length;j++){ if(

2016-04-29 11:18:42 303

原创 JavaScript字符串的查找，indexOf，lastIndexOf，search的区别

1.stringObject.indexOf(searchvalue,fromindex) 注释：indexOf() 方法对大小写敏感！注释：如果要检索的字符串值没有出现，则该方法返回 -1。 //找到subStr在mainStr中出现的次数;var mainStr= "HowareyouAreyouOKareyouaryou";var subStr= "are";countIns

2016-04-28 20:58:31 3124

原创 JavaScript字符串的取值与编码转换

var s = "how"取值//charAt返回指定下标出的字符for(var i = 0;i<s.length;i++){ var char = s.charAt(i); alert(char);}//charCodeAt返回指定下标出字符的编码for(var i = 0;i<s.length;i++){ var Code = s.charCodeAt(i);

2016-04-28 14:55:32 299

原创 JavaScript 数组内容的反转

var arr = [1,6,5,7,9,10,11]var len = arr.length-1;for(i=0;i<len/2;i++){ var temp = arr[i]; arr[i] = arr[len-i] arr[len-i] = temp;}document.write(arr.join(","));思路：//反转 arr = [9,4,6,3,1

2016-04-27 20:33:12 1009

原创 JavaScript 在有序数组中插入数字

插数var arr = [1, 5, 7, 11, 88];//var arr = [1,5, 6,7,11,88]要得到结果//把6按照顺序插入到列表中var index = 0;var num = 6;for (var i = 0; i < arr.length; i++) { if (arr[i] >= num) { index = i; b

2016-04-27 20:28:16 2343

原创 JavaScript数组冒泡排序

不分语言的冒泡排序var arr = [2, 5, 8, 3, 11, 45]; //arr.length = 6for (var i = 1; i < arr.length; i++) {//外层控制次数5次 for (var j = 0; j < arr.length - i; j++) { //内层控制比较的次数 if (arr[j] < arr[j + 1]) {

2016-04-27 20:03:54 319

原创 JavaScript求数组中的最大值和最小值

var arr = [4, 6, 9, 13,1];//求数组中最小值var min = arr[0];for(var i = 1;i<arr.length;i++){// 6 if(arr[i]<min){ min=arr[i]; }}alert(min);//求数组中的最大值var temp = arr[0];for (var i = 1; i <

2016-04-27 19:53:14 631

原创 JavaScript数组的赋值

1常规赋值var arr = new Array(); for (var i = 1; i <= 10; i++) { arr[arr.length] = i;}document.write(arr.join(","));结果：1，2，3，4，5，6，7，8，9，10var arr = new Array();for (var i = 0; i < 10; i++) {

2016-04-27 19:48:48 1150

原创 JavaScript DOM对象

DOM文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 1.document.getElementById(“id名”);//获取html元素 2.getElementsByName()方法 //返回带有指定名称的节点对象的集合。Tagname是标签

2016-04-26 11:38:46 312

window对象是BOM的核心，window对象指当前的浏览器窗口。1.打开窗口window.open(('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');//打开新

2016-04-21 20:16:35 310

原创 JavaScript Date对象

新建一个时间对象var nDate = new Date(); //var d = new Date(2012, 10, 1); //2012年10月1日var d = new Date('Oct 1, 2012'); //2012年10月1日获取设置年份document.write(nDate + "<br />"); //输出当前时间document.write(nDate.getFull

2016-04-21 11:23:39 230

原创 JavaScript事件响应

1.鼠标单击事件( onclick ）当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。<input name="点击我" type="button" value="点击我"onclick="openwin()"/>2.鼠标经过事件（onmouseover）当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmou

2016-04-20 20:29:21 790

空空如也

空空如也