- 博客(51)
- 收藏
- 关注
原创 去除谷歌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
913
原创 js 无缝滚动
<style> *{padding:0; margin: 0; list-style: none;} .warp{margin: 100px 0; height: 300px; padding: 50px;} .div2 .div3{width: 550px; height: 100px; position: relative;overflow: hidden;transit
2018-01-04 16:40:21
229
原创 js日期时间联系
<div class="warp"> <img src="1.png"> <img src="1.png"> <span>:</span> <img src="0.png"> <img src="9.png"> <span>:</span> <img src="1.png"> <img src="2.png"></div><script>
2018-01-02 11:33:22
198
原创 js获取非行间样式
<style> .warp div{width: 400px; height: 200px; background: yellow; margin-bottom: 30px; padding: 20px;}</style><div class="warp"> <div class="con"></div> <input type="button" value="获取行间样式
2017-12-29 15:22:34
181
原创 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
411
原创 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
145
原创 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
200
转载 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
562
原创 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
423
原创 原生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
306
转载 Html5的video标签自动填充满父div的大小
最近在写实时监控,发现给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
8592
原创 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
674
原创 弹性盒模型 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
470
原创 vscode实用操作
工作区常用设置之显示参考线和小地图"editor.renderIndentGuides": "true" //参考线"editor.minimap.enabled": "true" //小地图插件vscode-icon //让 vscode 资源树目录加上图标,必备良品!Path Intellisense //自动路劲补全,默认不带这个功能的,赶紧装
2017-07-26 14:57:18
1069
原创 表格—跨行、跨列
<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
619
转载 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
341
原创 js—新的选择器、获取class列表属性、 JSON新方法
<script>//新的选择器 querySelector、querySelectorAllwindow.onload = function(){ //var oDiv = document.querySelector('[title=hello]'); var oDiv = document.querySelector('.box'); //querySelector不支持IE6、7
2017-07-11 15:15:14
1014
原创 无缝滚动小练习—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
454
原创 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
1246
原创 transform—3D小练习
<style> .wrap{width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 100px auto; -webkit-perspective: 200px; -webkit-transform: scale(2); -webkit-perspective-origin: center ce
2017-07-10 17:23:52
343
原创 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
222
原创 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
995
原创 自定义单选框样式
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
270
原创 事件委托小练习
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
305
原创 返回顶部
$(".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
197
原创 修改文本框的值
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
543
原创 阻止冒泡——小练习
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
202
原创 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
759
原创 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
305
原创 js—手风琴效果
html部分<ul class="helpContnet"> <li> <p> 亿丰金融什么时间成立的? <span> <img src="images/hrlpRight.png" alt=""> </span> <
2017-06-27 09:02:53
335
原创 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
344
原创 sort-排序
<script> var arr = [1,10,2,73,8]; arr.sort(function(a,b){ return a-b; //如果return b-a; 就是从大到小 }); alert(arr); var arrWidth = [ '345px', '23px',
2017-06-23 15:18:13
180
原创 数组splice方法—去重
<script>var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];// 删除、替换、添加arr.splice( 0 , 0, 'aaaaaa'); // 第一个参数: 规定从何处添加/删除元素; 第二个参数:规定应该删除多少元素。arr.splice( 0, 2, '莫涛 or 钟毅' ); //替换 ['莫涛 or 钟毅','张森', '杜鹏'
2017-06-23 14:40:54
2015
原创 数组—添加删除方法
添加方法<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
453
原创 字符串查找—练习一
html部分<body> <p><span>妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!<br />2013年底,妙味课堂最新推出“远程培训”服务,受到很多朋友们的喜爱与追捧,我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p></body>
2017-06-22 09:14:18
232
原创 字符串查找
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
207
原创 定时器——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
244
原创 定时器——自动弹出广告
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
410
原创 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
265
原创 运算符、流程控制——全选、反选、全不选
html部分<body><div id="adiv"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox">
2017-06-16 16:44:11
259
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人