羽湘楚-优快云博客

原创 JS 和html jsp 页面返回上一页

2017-12-29 20:18:07 533

原创获取图片和文件的大小和格式

heml代码图片格式为：图片大小为： js代码 $(function(){ var p_1 = $('#p_1'), p_2 = $('#p_2'); $('body').on('change','#file',function(){ var path = $(this).va

2017-12-05 17:13:04 793

原创获取本地图片展示在页面上

html 代码选择文件 JS代码 function readLocalFile(){ var localFile = $("#uploadFile")[0].files[0]; var reader = new FileReader(); var content; reader.

2017-12-05 16:18:19 1426

原创异步上传图片和文件同个页面可多个

css样式 .sp{ display: inline-block; width: 200px; height: 150px; position: relative; line-height: 36px; font-size: 16px; color: white; border-radius:5px; border:1px solid #ddd; } .sp>input[t

2017-12-05 14:19:53 368

原创动态创建元素如何绑定事件

01 01 01 01 02 01 01 01 + var html=""; $("span").click(function(){ html="0101010102010101-"; $("body").append(html); }) $(document).on("click","strong",function(){ //动态创建事

2017-11-25 15:22:37 711

原创原生JS获取页面全部的checkbox的方法

var inp=document.getElementsByTagName('input'); var srr=[]; //空数组 function kk(){ for(var i=0;i if(inp[i].type=='checkbox'){//input的样式是checkbox时就添加到空数组中； srr.push(inp[i]) } }; console.log(srr);

2017-08-10 20:49:40 4580

转载 js兼容性

一、元素查找问题 1. document.all[name] (1)现有问题：Firefox不支持document.all[name] (2)解决方法：使用getElementsByName(name)，getElementById(id)等来替代。 2. 集合类对象问题 (1)现有问题：IE中对许多集合类对象取用时可以用 ()，但在Firefox只能用[]。如：IE

2017-07-30 16:15:19 453

原创数组排序

// 第一种方法 var arr=[3,5,4,6,4,8,2,4,4,6,2]; // 原理是循环比较大小，如果前面比后面的值大则调换过来 for(var i=0;i for(var j=0;j if(arr[j]>arr[j+1]){ var

2017-07-26 18:49:03 228

原创键盘事件获取键盘号码

//键盘点击事件 window.onkeydown=function(e){ var e=e||event; //做IE兼容 console.log(e.keyCode)//获取键盘上的数据 }

2017-07-26 17:03:29 675

原创深度拷贝和浅度拷贝

文字说明：比如一个数组（array）浅度拷贝是当数组a变量成数组b的时候，b改变里面的数组数值的时候，a也随着改变，深度拷贝是当当数组a变量成数组b的时候，b改变里面的数组数值的时候，a里面的数组数组不随着改变，例子：浅度拷贝 var arr=["a","b","c","d","e"]; var Ar

2017-07-26 11:12:01 1438

原创 2.0vue.js 第二种组件局部写法

我是组件 {{jk}} {{wo}} var Zu={ //组件 template:'#zu', data

2017-07-22 16:53:49 426

原创 2.0vue.js 局部变量这种比较常用

我是组件 {{wo}} {{hj}} Vue.component('aaa',{ data(){

2017-07-22 16:36:41 2703

原创 2.0vue.js 全局组件模板例子说明

我是要显示的组件里面也是一个模块 {{ans}} var Zu={ //组件根 template:'#zu' };

2017-07-22 15:16:32 519

原创 2.0vue.js 路由嵌套

我是主页我是新闻我是主页的子路由我是新闻的子路由 01 02

2017-07-22 11:45:19 467

原创 2.0版vue.js 路由原理

我是主页我是新闻我是主页的子路由我是新闻的子路由 //引用文件 //组件 var Ho={

2017-07-22 10:59:59 1063

原创 canvas 画圆的比例

效果图对象代码如下： *{ margin: 0; padding: 0; } #o{ margin: 50px auto; background: gainsboro; } var ma=document.getElementById('o'); ma.width="400"; ma.height='400'; var m

2017-07-22 00:04:35 831

原创 vue.js ajax

{{inner}} window.onload=function(){ new Vue({ el:'#box', data:{

2017-07-18 19:18:37 557

原创 json对象细节

格式： var kk={ a:1 b:2 c:3 d:4 } 在一个对象里key值是唯一的，abcd是key, 有时候获取可以的时候是kk[a]或许是kk.a

2017-07-08 17:07:59 294

原创千分符

千分符是从最后开始以三个数字用逗号来隔开的。比如45,125,124，452,451 下面我们随机用一个字符串来做出这种千分符； (function(){ var strin='12453269751238442'; var srry=[]; var nu=0; var

2017-07-06 20:22:14 4114

原创变峰驼名

var yuan='border-bottom-color'; var jj=yuan.split('-'); //以-分割为数组，则会去掉- for(var i=1;i var ko=jj[i].split(''); //把jj数组里下标的第一和第二个字符串分割成数组; ko[0]=ko[0].toUpperCase(); //把数组的首个字母变为大写 jj[i]=ko

2017-07-05 20:30:21 333

原创查找字符串中出现最多的字符和几次

var kk='llkkjjuitfd'; var max=0; var letter=""; var jj=kk.split(''); //分割字符串变成数组 var boj={}; //创建空对象 for(var i=0;i//循环数组 if(boj[jj[i]]){ //如果里面的key值存在则key的值+1 // console.log(boj); boj[j

2017-07-05 20:29:04 662

原创数组去数组重

var Array=[0,2,3,5,7,8,9,5,13,2,17,13,19]; var h={}; //建立对象对象的key不能重复 var j=[];//建立空数组 for(var i=0;i if(!h[Array[i]]){//条件是为假 false的时候则进来，数组里面传进来的是key值里面没有值的时候为假 false，符合条件，则进来，因为对象的key值

2017-07-03 20:16:32 403

原创函数闭包解释

简单来说，闭包就是父标签能运用子标签的值，闭包里面的变量会保存在内存中，不会被垃圾回收机制回收，但是由于闭包占用的内存比较大，可能会造成网页的性能和在ie中内存泄漏问题，所以一般都不能随意使用闭包，如果要使用那就在结束函数时清掉不使用的闭包变量；下面我们通过一些例子来说明什么是闭包； Js代码　　var n=999; 　　function f1(){ 　　　　alert(

2017-07-03 14:54:03 407

原创机器人的创建

*{ margin: 0; padding: 0; } .box{ width: 400px; height: 600px; overflow: auto; border: 1px solid blue; } .tex{ width: 300px; height: 30px; border: 1px solid firebrick; box-sizing: bord

2017-07-03 11:57:14 333

原创 css引用的方式和区别性

引用方式有三种，常用的是link方式 1）link方法 2）使用@import引入 3）页面直接加样式本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@imp

2017-07-03 11:53:31 430

原创 JS本地数据库创建和查询

2017-07-01 15:36:17 6542 3

原创 h5本地存储

有临时存值和永久存值，还有清空值； //临时存储 window.sessionStorage.setItem('nu',inp[3].value); //存值名称对象的值或内容 window.sessionStorage.getItem('nu'); //获取存到的值 window.sessionStorage.clear(); //删除存到的值 //

2017-07-01 14:45:30 683

原创 H5中的音乐和视屏自定义

> 音乐标签；媒体元素 controls : 显示或隐藏用户控制界面 autoplay : 媒体是否自动播放 loop : 媒体是否循环播放 currentTime : 开始到播放现在所用的时间 duration : 总时间(只读) volume : 0.0-1.0的音量相对值 muted : 是否静音 t

2017-07-01 14:30:05 394

原创 h5的canvas画布常用方法

首先canvas是有默认的宽度和高度，不可以在CSS样式中设置高端和宽度，否则会按照比例来缩放，一般都是在JS中设置宽度和高度；下面用一个例子介绍； body{ background:#303B52; } canvas{ background: white; /*width: 500px; height: 500px;*/ /*不能在这里加，因为会默认帮你比

2017-07-01 10:46:14 2616

原创 JS本地面向对象Math数字的常使用方法

Math多部分是用以游戏的开发，在前端比较经常使用的有Math.random()，math.round()，Math.floor()，Math.clie()；下面举例子他们的使用作用； Math.random(),是随便数，取值为0~1的距离，需要取其他的数字则需要乘以它的倍数，例如我要去1~10的数字，则Math.random()*10; Math.round(),是四舍五入法，比如3.14

2017-07-01 10:01:03 467

原创 JSdate日期的本地面向对象方法总结

首先获取系统时间； var da=new Date(); getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) getFullYear() 从 Date 对象以四位数字返回年份。 getMonth()+1 从 Date 对象返

2017-06-30 20:08:12 366

原创 JS字符串String面向对象方法

字符串一般都是用双引号或许单引号包着，例如； var kk=“我是一个字符串”； console.log(typeof(kk)); 结果是String; 下面介绍几种常用的方法； charAt（）返回在指定位置的字符;例子； var str="Hello world!" document.write(str.charAt(1)) 查找这个下标的是哪一个字符下标从零开始

2017-06-30 19:02:52 483

原创面向过程和面向对象的二级菜单转变

*{margin: 0;padding: 0;list-style: none;} body{ padding: 50px 300px; } #one li{ width: 100px; height: 50px;

2017-06-30 18:54:03 493

原创 JS面向对象轮播图实现

在这里只是把实现代码写出来，需要深入讨论交流的加微信 ni461586842 *{ margin: 0; padding: 0; } #pci{ width: 400px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } ul{ position: ab

2017-06-29 20:29:15 1842

原创面向对象拖拽实现；

在这里我只写代码！需要交流的加我微信慢慢讨论 ni461586842; #box{ width: 200px; height: 200px; background: red; position: absolute; } #bb{ width: 200px; height: 200px; background: green; position

2017-06-29 20:19:34 443

原创 JS Array(数组)本地面向对象总结和运用

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 对象只是一种特殊的数据。对象拥有属性和方法。下面我来总结一下js本地面向的对象； 1Array(数组)；方法：concat 连接两个或更多的数组，并返回结果；

2017-06-28 22:58:14 349

原创 JS面向对象原理和

什么是面向对象 1使用对象时，只关注对象提供的功能，不关注其内部细节简单的是就是构造一个函数类，然后对象.实例中运行这个类，相对于封装函数，先看生成对象的原始模型； var cat1={}; //创建一个空对象 cat1.name="大毛";//按照原型对象的属性赋值 cat1.color="黄色"; var cat2={}; cat2.name

2017-06-27 20:06:12 618

原创 JS放大镜实现原理和代码

*{ margin: 0; padding: 0; } .xiao{ width: 300px; height: 300px; margin: 50px auto 0; position: relative; } .xiaopci{ width: 300px; height: 300px; display: block; } .shou{ width: 100px;

2017-06-27 14:14:54 3683

原创正则表达总结

字符集 ISO-8859-1，包含英文字符和计算常用的字符，一共有127个字符 GB2312，包含ISO-8859-1的所有字符和一些常用的中文字符，不包含生僻字 GBK，GB2312的扩展，包含了更多的汉字和生僻字 BIG5，繁体汉字 UNICODE，目标实现能够显示地球上所有文字，包含UTF-8，UTF-16.... [] 中括号可以写需要查找的数据范围 [0-9] 查找是否

2017-06-22 23:05:40 710

原创 Jq的常用选择器

Jq的常用选择器 $(‘div’)元素选择器 $(‘#div’)id选择器 $(‘.div’)类别选择器 css()样式 attr()属性 $(function(){ $('#boxli').css('background','red');//所有 $('#box li:odd').css('background','red');//奇数 $('#box li:even').css(

2017-05-29 22:59:05 520

空空如也

空空如也