波克比520-CSDN博客

原创 js截取字符串长度，超出的用省略号代替

写了一个测试demo，记录一下： $(function(){ $('.news_rwz p').each(function(){ var max = 54; if($(this).text().length > max){ $(this).text($(this).text().substring(0,max));

2017-09-20 14:43:06 2972

原创记录一下手机端数字键盘小数点的问题

最近在工作中，碰到一个关于手机弹数字键盘的问题，对于文本框，弹数字键盘，通常我们都习惯使用tel，在手机上测试的时候，我们会发现，安卓手机的数字键盘是带小数点的，但是苹果手机没有小数点，问题就来了，有时我们提现，余额是有小数点，我们想全部提取出来，该怎么做呢？后来实际测试中发现，使用type=“number”属性，苹果，安卓都会有小数点，正好满足我们的需求，就这个小问题，记录一下，以免

2016-04-15 10:20:58 1900

原创 Javascript对象相关方法

Javascript数组相关对象方法 // splice() //从数组中添加/删除元素，然后返回被删除的元素 // var arr = ['a','b','c','d','e']; // 添加元素 // console.log(arr.splice(1,0,'f')); // console.log(arr); //['a','f','b','c','d','e'] /

2016-01-04 14:19:42 504

原创 JS模拟土豆弹窗——链式运动

JS模拟土豆弹窗——链式运动 *{padding: 0; margin: 0;} body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;} #foot{ width: 187px; padding-left: 10px; height: 34px; line-height: 34px; background

2015-12-23 14:16:04 675

原创 JS完美运动框架详解——原理分析及demo

1.运动原理Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动起来，改变其自身的位置属性，比如高宽，左边距，上边距，透明度等。还有一个很重要的前提是，运动的物体必须是绝对定位。window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.oncl

2015-12-18 15:40:34 10781 3

原创 JS倒计时二

图片倒计时 Document window.onload = function(){ setInterval(fnTime,1000); }; fnTime(); function fnTime(){ var oDiv = document.getElementById('date'); var aImg = document.g

2015-12-16 10:12:47 512

原创 JS倒计时

倒计时1：倒计时 window.onload = function(){ var timer = null; timer = setInterval(countDown,1000); countDown(); function countDown(){ var oTime = document.getElementById('time');

2015-12-15 17:51:10 658

原创 JS图片时间

Document window.onload = function(){ setInterval(fnTime,1000); }; fnTime(); function fnTime(){ var oDiv = document.getElementById('date'); var aImg = document.getElementsB

2015-12-14 08:57:41 1115

原创 JS获取当前时间

显示当前时间： JS获取当前时间 /* console.log('当期星期：' + iWeek); //当期是星期六 => 6 星期日 => 0 星期一 => 1 星期二 => 2 星期三 => 3 星期四 => 4 星期五 => 5 星期六 => 6 */ window.onload = function(){ setInte

2015-12-12 16:57:40 510

原创修复图片移入移出抖动错位bug

img{ width:150px; height:150px; position:absolute; top:50px; left:300px; } // 封装getStyle函数 function getStyle(obj, attr){ return obj.currentStyle ? o

2015-12-11 15:37:46 1016

原创点击按钮控制div运动——函数封装3

点击按钮控制div前后运动——函数封装3 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.currentSt

2015-12-09 16:46:56 460

原创点击按钮控制div上下运动——函数封装2

点击按钮控制div前后运动——函数封装2 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.current

2015-12-09 16:28:40 557

原创点击按钮控制div前后运动——函数封装1

点击按钮控制div前后运动——函数封装1 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.current

2015-12-09 16:27:21 347

原创点击按钮控制div前后运动——定时器应用

点击按钮控制div前后运动——定时器应用 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.current

2015-12-09 16:24:56 556

原创 JS隔行变色

CSS样式：*{ padding: 0; margin: 0;} ul{ list-style: none;} body{ color: #333; font-size: 14px; font-family: "Microsoft Yahei"; background: #fff;} #box li{ padding: 10px; border-bottom: 1px solid #ee

2015-12-09 10:47:42 427

原创 JS横向延时2级下拉菜单

CSS样式：body{ font-size: 12px; color: #333;} body, ul,h2{ margin:0;padding:0;} li { list-style:none;} a{ color: #333; text-decoration: none;} a:hover{ color: #f00;} #nav { width:100%; border:1p

2015-12-08 17:39:19 961

原创 JS淘宝商品广告效果

CSS部分：ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; }

2015-12-07 16:04:55 936

原创 JS按钮控制内容左右滚动

CSS部分：*{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix:after{ clear: both; display: block; content: ""; height: 0; overflow: hidden;} a{ text-decoration: none; co

2015-12-05 17:12:39 1016

原创 JS按钮控制内容上下滚动

CSS代码：*{ padding: 0; margin: 0;} li{ list-style: none;} a{ text-decoration: none; color: #333;} a:hover{ color: #f00;} .center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahe

2015-12-05 17:09:24 2094

原创定时器应用—选项卡自动切换

CSS部分：body{ background: #fff; font: 14/1.4 "Microsoft Yahei";} ul{ padding: 0; margin: 0;} li{ list-style: none;} #box{ width: 400px; height: 300px; margin: 0 auto; background: #eee url(img/loade

2015-12-04 15:35:45 981

原创 JS模拟百度文库评分

CSS部分：body,h3{margin:0; padding:0;} #grade{width:500px; margin:100px auto;} #grade span{float:left; color:#ff0808; margin-top:9px;} #grade h3{float:left; height:22px; line-height:22px; font-size:

2015-12-04 15:31:37 903

原创 LESS学习笔记(下)

// 通过传参进行匹配，类似js中的if语句LESS预编译：.trianger(top,@w:5px,@c:#f00){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed;}.trian

2015-12-03 15:57:01 378

原创 JS模拟百度音乐-全选操作

CSS部分：body,ul{margin:0; padding:0;} ul{margin:100px auto 0; width:200px;font-size:12px; background:white;} li{list-style:none; height:30px; line-height:30px; border-bottom:1px solid #fff;} span{f

2015-12-01 15:47:51 1423 1

原创 JS基础—选项卡套选项卡(函数传参)

CSS部分：body,ul{margin:0; padding:0;} .clearfix{zoom:1;} .clearfix:after{display:block; content:""; clear:both; height: 0; overflow: hidden;} li{list-style:none;} a{text-decoration:none;} img{bor

2015-11-28 11:18:22 2807

原创 JS基础——修改文本框的值(函数传参)

CSS部分：*{ padding: 0; margin: 0;} body{ font-size: 12px; color: #333; background: #fff;} li{ list-style: none;} a{ text-decoration: none; color: #333;} #cate{ width: 300px; margin: 40px auto; bor

2015-11-27 17:27:04 3544

原创 JS基础——选项卡列表显示隐藏缩略图(函数传参)

CSS部分：*{ padding: 0; margin: 0;} li{ list-style: none; font-size: 12px;} a{ text-decoration: none; color: #333;} img{ border: none; vertical-align: top;} .clearfix{ zoom: 1; } .clearfix:after{

2015-11-27 16:36:32 857

原创 js基础——图片切换实例(函数传参)

CSS部分：ul { padding:0; margin:0; }li { list-style:none; }body { background:#fff; }.box{ width: 400px; height: 500px;/* margin:0 auto; */ float: left; margin-right: 60px; background:#fff url(img/lo

2015-11-27 16:32:28 697

原创 LESS学习笔记（上）

1、变量——Variables 【定义变量用@前缀】less编译：@charset "utf-8";// 注释：双斜杠：单行注释 css不解析/*这种多行注释，css会解析*/body{ background: #eee;}//注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。//1、变量——Variables 【定义变量用@前缀】@colo

2015-11-26 16:46:18 895

转载移动端reset.css

* { margin: 0; padding: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block;}html { font-size: 12px; color: #666; font-

2015-03-03 09:43:18 1645

转载 jquery学习笔记（转）

1:下面这个函数只要在DOM载入就绪(获取文档对象就绪的时候)就能被执行，而window.onload需要在页面图片文件加载完之后才能执行. $(document).ready(function(){//可用jQuery(document).ready(function()代替或者 $(function() // 你的代码 }); 2:鼠标点击时

2015-02-27 11:44:34 691

原创 JS—数组整理

//定义一个arr数组var arr = new Array();//向数组的末尾添加一个a元素arr.push('a');//获取所有数组元素//alert(arr); //a//获取数组中的第一个元素【默认从0开始】//alert(arr[0]); //a//获取数组的长度//alert(arr.length); //1//shift：删除原数组的第一项，并

2015-01-24 11:54:12 980

原创 JS基础——JS找到合适的值

HTML部分：var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];--

2014-11-20 15:05:51 927

原创检测QQ号码

检测QQ号码window.onload = function(){ var oText = document.getElementsByTagName('input')[0]; var oBtn = document.getElementsByTagName('input')[1]; oBtn.onclick = function(){ var text = oText.va

2014-11-17 15:40:29 1159

原创 JS基础——伸缩菜单3

JS——伸缩菜单3ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }#list h2 { font-size:14px; border-top:1px solid #ccc;

2014-11-10 16:15:25 513

原创 JS基础——伸缩菜单2

JS——伸缩菜单2ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }#list h2 { font-size:14px; border-top:1px solid #ccc;

2014-11-10 16:07:58 567

原创 JS基础——伸缩菜单

JS——伸缩菜单ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }#list h2 { font-size:14px; border-top:1px solid #ccc; h

2014-11-10 15:52:08 564

原创 JS基础——数据类型

ECMAScript：标准、核心JS中的数据类型：数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义

2014-11-08 16:49:11 454

js基础——图片切换实例ul { padding:0; margin:0; }li { list-style:none; }body { background:#fff; }#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(images/loader_ico.gif) no-repe

2014-11-07 11:26:58 618

原创 JS基础——索引值应用2

JS基础——索引值应用2window.onload = function(){ var aBtn = document.getElementsByTagName('input'); var aP = document.getElementsByTagName('p'); var arr = ['孙悟空','孙悟饭','孙悟天']; for(var i=0; i<aBtn.lengt

2014-11-01 10:18:58 635

原创 JS基础——自定义属性2

JS基础——自定义属性2window.onload = function(){ var aBtn = document.getElementsByTagName('input'); var arr = ['孙悟空','琪琪','孙悟饭','孙悟天']; for(var i=0; i<aBtn.length; i++){ aBtn[i].index =0; aBtn[i].o

2014-10-31 17:59:36 488

w3cschool学习教程

空空如也