2019年03月_zuo_zuo_blog

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 JS中Input上传文件获取文件名并显示在另一文本框中

功能：1.上传多个文件2.获取文件名3.显示在右边文本框中4.带有删除功能在这里插入代码片```<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> ...

2019-03-31 23:08:03 1992 1

原创 input file上传文件样式美化

1.通过label标签的for属性绑定控件idlabel标签的for属性与表单进行绑定包含显示绑定和隐式绑定显示绑定：上传文件隐式绑定：在标签中放入控件隐式地连接起来上传2.通过onclick点击按钮事件进行input操作原理：通过点击button按钮触发点击事件获取input中idCSS3中multiple可以选择多个文件1代码片<!DOCTYPE html...

2019-03-31 20:41:10 6188

原创 CSS3动画小案例

1气泡效果原理：a）首先设置多背景图片background: url(“2.jpg”) no-repeat left top,url(“2.jpg”) no-repeat right bottom;b）然后添加变换之后效果.box:hover{background-position: left bottom,right top;}c）最后设置过渡 transition: a...

2019-03-31 11:16:32 3266

原创 CSS3实现扑克牌动画

代码片<style> body{ background-color: #eeeeee; } .box{ width:300px; height:440px; margin: 100px auto; position...

2019-03-31 11:02:34 1744 1

原创 CSS3中渐变效果

1.线性渐变a）从左到右渐变div:nth-child(1){background-image: -webkit-linear-gradient(left,red,black);}b）不指定方向默认是从上到下div:nth-child(2){background-image: linear-gradient(yellow,green);}c）按照指定角度div:nth-chil...

2019-03-30 23:13:18 264

原创 CSS3背景设置

1.背景尺寸添加背景图片background: url(“1.jpg”) no-repeat;a)控制背景图片大小具体数值控制background-size:500px 500px ;b）百分比控制：background-size:100% 50%;c） Cover会保证完全覆盖盒子，但不能保证完全显示，会超出background-size:cover;（全屏背景自适应比较好实用）...

2019-03-30 22:58:52 603

原创 CSS3边框美化

1.边框圆角border-radius单个写法：border-top-left-radius:水平半径垂直半径；border-top-left-radius: 60px 120px;border-top-right-radius: 60px 120px;border-bottom-right-radius: 60px 120px;border-bottom-left-radius:...

2019-03-30 21:25:19 1431

原创 css3装饰渐变地球

box{ width:300px; height:300px; /*background-color: blue;*/ border-radius: 50%; margin: 100px auto; background-image: radial...

2019-03-30 20:28:44 161

原创浏览器兼容问题（浏览器私有化前缀）

渐变色代码：background:linear-gradient(left,red,blue)运行发现所有浏览器都不兼容（需要添加前缀）谷歌内核：background: -webkit-linear-gradient(left,red,blue);IE内核：background: -ms-linear-gradient(left,red,blue);火狐内核：background: -m...

2019-03-29 20:20:30 199

原创 CSS3凹凸文字效果

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: #ccccc...

2019-03-29 19:29:10 974

原创 CSS3中Li标签结构伪类选择器

代码： li:first-child{ background-color: pink; } li:nth-child(10){ background-color: pink; } li:last-child{ background-color:...

2019-03-29 14:55:17 1612

原创 JS数组删除指定元素

1.splice()方法代码片var fruits=[1,2,3,4,5,6,7];fruits.splice(2,1); console.log(fruits);2.索引值代码var fruits=[1,2,3,4,5,6,7]; var k=fruits.indexOf(4); if(k>-1){ console.log(fruits.s...

2019-03-28 23:54:03 98

原创 Webtrom汉化方法

先下载一个中文压缩包，resources_cn.jar文件放在bin目录下即可

2019-03-28 21:12:20 224 1

原创 WebStrom 激活码

在打开的 License Activation 窗口中选择 License server。点击 Activate。http://idea.iteblog.com/key.php

2019-03-28 21:03:31 1861

原创 H5属性选择器

之前学过的选择器div{}.box 类名选择器#box id选择器div p 后代选择器div.box 交集选择器div,p,span 并集选择器div>p 子代*：通配符div+p:选中div后面的第一个pdiv~p：选中div后面的所有p属性选择器，[]通过属性来选择语法格式：语法：[title]:选中页面的E元素，并且E需要带有title属性...

2019-03-28 20:58:58 348

原创 H5 导航栏Tab切换

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .tabs{ width: 400px; text-align: center; margin: 30px aut...

2019-03-28 18:08:41 5463

原创 H5自定义属性

1.H5中自定义属性不能随意命名,必须以data开头2.获取标签的原属性var box=document.querySelector('.box'); //box.index=100; console.log(box.className); console.log(box.title);3.获取标签的自定义属性（自定义属性需要通过dataset[]方式获取）console.l...

2019-03-28 16:33:35 363

原创 H5中操作类名的API

１．ＡＰＩa) box.classList.add(‘类名’):添加类名b) box.classList.remove(‘类名’):删除类名c) box.classList.contains(‘类名’)：是否包含该类名d) box.claaList.toggle(‘类名’)：切换２．获取元素a) 只会选择符合条件的第一个元素var box1=document.querySelecto...

2019-03-28 09:06:03 459

原创解决音频视频兼容性问题

audio支三种音频格式：Ogg Vorbis,MP3,Wav <video src="js/1.mp3" controls="controls" autoplay="autoplay"></video>  <video controls="controls" a...

2019-03-27 20:41:57 1064

原创 H5浏览器兼容性问题解决方法

Ie8以下的版本不适用H5，解决办法-引入html5shiv.js文件下载地址：/UserFiles/file/20150118/20150118153337_288.zip

2019-03-27 19:41:58 2202

原创 H5中oninout、 oninvalid事件（自定义正则验证表单）

代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100...

2019-03-27 19:38:20 3049

原创 h5表单（属性）

代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100...

2019-03-27 19:34:05 350

原创简单表单（H5元素）output keygen ）

代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 1000...

2019-03-27 19:31:54 391

原创 H5 设计简单表单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100%; ...

2019-03-27 19:28:19 2939

原创编写一个方法，去掉一个数组中的重复元素

var arr6=[1,2,3,4,5,2,3,4]; console.log(arr6); console.log(fn(arr6)); function fn(array){ var newArr=[]; for(var i=0;i<array.leng...

2019-03-26 21:05:19 766

原创清空数组

var arr=[1,3]; console.log(arr); //第一种清空数组方法 arr.splice(0); console.log(arr); //第二种 arr.length=0; ...

2019-03-24 16:39:45 1115

转载百度富文本编辑器ueditor

百度富文本编辑器ueditor在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo，然后创建ueditor.html文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可,代码如下： 1 2 3 4 5 6 7 8...

2019-03-24 15:39:19 2099

原创 SVN配置与安装

1.首先打开Eclipse,点击栏目条help下面Marketplace在搜索框中搜索SVN检索出来选择第三个Subclipse 4.3.0点击install2.查看SVN是否安装成功：点击栏目条下面的window下拉选择Show View 出现SVN如下界面即可3.从SVN资源库中导出项目输入URL用户名以及密码...

2019-03-23 17:24:01 2186

转载前端面试技巧

楼主总结了一些关于前端面试时技能点的知识点：里面的知识都是从互联网上找到的。1、熟练使用HTML/CSS，能够手写符合W3C标准的页面，能够兼容主流浏览器，可以精确还原设计图；浏览器兼容问题：浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:1...

2019-03-23 16:08:31 251

原创迭代方法：every()，some(),find(),findIndex(),foreach(),filter()

迭代方法（不会修改元数组）every()方法测试数组的所有元素是否都通过了指定函数的测试(返回值是Boolean类型)filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。forEach()方法对数组的每个元素执行一次提供的函数foreach遍历数组（无返回值，存操作数组中的元素）map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个...

2019-03-22 21:44:20 301

原创 JavaScript中数组的concat()、slice()和splice()方法

连接：Array.prototype.concat()方法concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。截取：Array.prototype.slice()slice()方法返回一个新的数组对象，这一对象是一个由begin和end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。替换：Array.prototype.s...

2019-03-22 20:25:49 662

原创数组排序：sort()方法

sort()方法用原地算法对数组的元素进行排序，并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。默认从小到大排序（按照第一个字符排序，回调函数可以按照你设置的规则）arr.sort([compareFunction])用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。alert("0".c...

2019-03-21 20:24:17 5254

原创 JavaScript中数组的push()、pop()、shift()和unshift()方法

1.数组Array.prototype.push()方法push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。2.数组Array.prototype.pop()方法pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。从数组中删除的元素(当数组为空时返回undefined)。3.数组Array.prototype.shift...

2019-03-21 18:52:39 897

原创输入某年某月某日，判断这一天是这一年的第几天

//求天数,参数问题是变化的，处理方法两种，第一种就是变成成员变量不方便 //第二种是吧年月日变成参数 function getDays(year,month,day){ //把每月的天数组成一个数组，不包含闰年 var arr=[31,28,31,30,31,30,31,31,30,...

2019-03-20 16:37:24 542

原创 Git安装与配置

1.下载地址：https://gitforwindows.org/下载时候注意事项：默认选择第一个，但是Use git from git base only要特别选择2.配置path找到git所在的根目录复制：C:\Program Files\Git，然后找计算机-系统属性-高级系统设置-高级-环境变量-path-编辑+；C:\Program Files\Git3.配置gi...

2019-03-19 22:17:17 747