七彩皮皮丽-CSDN博客

原创去除谷歌input type设置password出现黄色背景和默认内容

去除谷歌input type设置password出现黄色背景和默认内容input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow:0 0 0 60px white inset; -webkit-text-fill-color: #878787...

2018-07-30 15:23:32 906

原创 js 无缝滚动

2018-01-04 16:40:21 224

原创 js日期时间联系

2018-01-02 11:33:22 196

原创 js获取非行间样式

2017-12-29 15:22:34 177

原创 switch判断练习

<div class="warp"> <input type="text"> <select> <option value="0">性别</option> <option value="1">男</option> <option value="2">女</option> </select> <input type="button" v

2017-12-28 17:09:09 406

原创 jquery—表单验证

HTML、CSS部分<style> .int{ margin-bottom: 10px;} .high{color: red;} .msg{color: red;}</style><form style="margin: 100px"> <div class="int"> <label for="name">姓名：</la

2017-12-12 16:53:51 139

原创 Git 分支

分支操作新建分支：$ git checkout -b dev或$ git branch dev$ git checkout dev查看分支: $ git branch切换分支： $ git checkout dev//本地dev分支与远程origin/dev分支的链接，可以先$ git pull 报错中查看下面命令。$ git branch --set-upstream origin 分支

2017-11-20 10:49:41 194

转载 js模板引擎-art-template常用总结

art-templatejavascript 模板引擎，官网： https://aui.github.io/art-template/docs/installation.html#分为原生语法和简洁语法，本文主要是讲简洁语法基础数据渲染输出HTML 流程控制遍历调用自定义函数方法子模板引入基础数据渲染一、引入art-template.js文件<script src="t

2017-09-12 17:02:35 554

原创 js获取系统时间，显示到页面上

function getNowFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var strDate = date.getDate(); var seperator1 = "-"; var seperator2 = ":"; //分秒时间是一位数字，在数字前补0

2017-09-12 16:23:22 414

原创原生js写tab选项卡

html、css部分<div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3">

2017-08-23 10:23:54 300

最近在写实时监控，发现给video加上它父级一样的宽高，但是实际上video的宽要比它父级的宽度要小。想要video能自动填充慢父div的大小，只要给video标签加上style=”width= 100%; height=100%; object-fit: fill”即可。object-fit语法 object-fit属性的语法非常的简单：object-fit:fill | contain | c

2017-08-18 10:34:51 8570

原创 input值控制按钮样式

<body> <div> <input type="text" id="inp1" > <input type="button" class="inp2" value="点击" disabled></div> <script type="text/javascript"> //oninput 事件在用户输入时触发(元素的值发生改变时触发)，类似于 onchange 事件，

2017-08-08 15:13:32 667

原创弹性盒模型 Flex 布局

html部分<body style="margin: 0;"> <div id="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div></body>css部分<style>#box{ height: 300px; border

2017-08-03 17:48:23 463

原创 vscode实用操作

工作区常用设置之显示参考线和小地图"editor.renderIndentGuides": "true" //参考线"editor.minimap.enabled": "true" //小地图插件vscode-icon //让 vscode 资源树目录加上图标，必备良品！Path Intellisense //自动路劲补全，默认不带这个功能的，赶紧装

2017-07-26 14:57:18 1061

原创表格—跨行、跨列

<html><body><h4>跨两列的单元格：</h4><table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> //colspan="2" 跨两列 </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td>

2017-07-13 16:12:02 603

转载 jQuery中on与click的区别

一直搞不清楚jquery中 on 和 click 的区别今天看到一篇文章写得很好下面根据一个实例就能很好的理解了！html部分 <div> <h1>展示jQuery中on()和click()的区别</h1> </div><div> <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</s

2017-07-12 16:27:29 337

原创 js—新的选择器、获取class列表属性、 JSON新方法

2017-07-11 15:15:14 1007

原创无缝滚动小练习—animation

html部分<body><div id="wrap"> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li>

2017-07-11 11:46:09 445

原创 animation—动画/停止动画

css部分<style>@-webkit-keyframes domove{ 0%{ top:0;left:0; } 25%{ top:0;left:300px; } 50%{ top:300px;left:300px; } 75%{ top:300px;left:0px;

2017-07-10 18:08:33 1238

原创 transform—3D小练习

2017-07-10 17:23:52 339

原创 3d变换和动画

3D变换<style> .box{width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 30px auto; -webkit-transform-style: preserve-3d; -webkit-perspective: 100px;} .div{width: 100px; hei

2017-07-10 16:02:01 215

原创 css3—transition、transform

transitiontransition: 5s width linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); transformtransform后写的样式先执行！div{ transform: translate(50px,100px); //值 translate(50px,100px) 把元素从左

2017-07-07 16:08:13 988

原创自定义单选框样式

html部分<body> <label> <input type="radio" name="tab" /> <span></span> </label> <label> <input type="radio" name="tab" /> <span></span> </label> <label

2017-07-07 14:45:49 264

原创事件委托小练习

html部分<div id="warp"> <div class="warpDiv"> <p class="deleteDiv">-</p> <p class="toggleShow">+</p> </div></div>css部分<style type="text/css"> .warpDiv p{display: inline-block

2017-07-04 17:41:49 300

原创返回顶部

$(".btn_top").click(function(){ $('html, body').animate({scrollTop: 0},200); })$(window).scroll(function(){ if($(window).scrollTop()<=300){ $(".btn_top").hide(); }else{

2017-07-03 09:33:43 191

原创修改文本框的值

html部分<div class="lis"> <div> <span>妙味实体课程</span> <img src="img/pen.png" alt="" /> </div> <div> <input type="text" value="妙味实体课程" /> <a href="#">保存</

2017-06-30 11:51:35 539

原创阻止冒泡——小练习

html部分<div class="yi"> <div class="er"> <p>1</p> <ul> <li>2</li> <li>3</li> <li>4</li> <li>5</li>

2017-06-30 09:10:36 197

原创 Event—跟随鼠标移动的div实例阻止冒泡

html部分<body style="height: 2000px;"> <div id="div1"></div></body>js部分<script>window.onload = function() { //event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。

2017-06-29 17:20:15 753

原创 js—BOM焦点事件

js<script>window.onload = function() { var oText = document.getElementById('text1'); //onfocus : 当元素获取到焦点的时候触发 oText.onfocus = function() { if ( this.value == '请输入内容' ) {

2017-06-29 17:05:15 300

原创 js—手风琴效果

html部分<ul class="helpContnet"> <li> <p> 亿丰金融什么时间成立的？ <span> <img src="images/hrlpRight.png" alt=""> </span> <

2017-06-27 09:02:53 329

原创 concat、reverse方法、随机排序、随机函数

reverse()方法<script> var arr1 = [ 1,2,3,4,5,6 ]; arr1.reverse(); //6,5,4,3,2,1 reverse()颠倒数组中元素的顺序： alert( arr1 ); var str = 'abcdef'; alert(str.split('').reverse().join(''));

2017-06-23 16:24:33 339

原创 sort-排序

2017-06-23 15:18:13 176

原创数组splice方法—去重

2017-06-23 14:40:54 2006

原创数组—添加删除方法

添加方法<script> var arr = [ 1,2,3 ]; arr.push( 'abc' ); //数组末尾添加 alert( arr ); //1,2,3,abc alert( arr.push( 'abc' ) ); alert( arr ); // 4 alert( arr.unshift( 0 ) );

2017-06-22 10:39:20 444

原创字符串查找—练习一

html部分<body> <p><span>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />2013年底，妙味课堂最新推出“远程培训”服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p></body>

2017-06-22 09:14:18 227

原创字符串查找

js<script>alert( 'miaov'.charAt(2) ); //aalert( 'miaov'.charCodeAt(2) ); //97alert( String.fromCharCode(22937, 21619) ); //妙味var str = 'www.miaov.com/2013ww';alert( str.indexOf('m') );

2017-06-21 12:00:04 193

原创定时器——setTimeout

html部分<body> <div id="qq"></div> <div id="title"></div></body>css部分<style> #qq { width:200px; height:400px; background:#F9C; } #title { width:240px; height:180px; background:#FC6; posi

2017-06-20 13:47:13 237

原创定时器——自动弹出广告

html部分<body> <img id="miaov" src="img/miaov.jpg" /></body>css部分<style> body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; } img { display:none;}</style>js部分<scri

2017-06-20 09:17:00 401

原创 setInterval、定时器管理、背景选择实例

html部分<input type="button" value="换背景吧" /><input type="button" value="停" />js部分<script> var btn = document.getElementsByTagName("input"); var imgsrc = ["img/1.jpg","img/2.jpg","img/3.j

2017-06-19 15:55:39 256

原创运算符、流程控制——全选、反选、全不选

html部分<body><div id="adiv"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox">

2017-06-16 16:44:11 255

空空如也

空空如也