javascript
文章平均质量分 61
Sunny_can
这个作者很懒,什么都没留下…
展开
-
javascript中的星星和乘法表
基于Javascript的菱形和九九乘法表//星星 function xing(){ for(var i=0;i for(var j=0;j document.write("*"); } documen原创 2016-09-25 15:04:24 · 407 阅读 · 0 评论 -
css八大行星旋转实例
*{margin: 0;padding: 0;list-style: none;}ul{width: 600px;height: 600px;margin: 100px auto;background: rgba(0,0,0,0.5);position: relative;}li{width: 100%;height: 100%;bord原创 2016-11-23 15:55:49 · 2043 阅读 · 0 评论 -
js本地存储localStorage
/*** 存储在本地 的数据 * 优点:* 1. 速度快 ,不需要向服务器发请求* 2. 存储量大,约5MB* 3. 安全* 4. 生存周期(生命周期)是永久,只要不执行removeItem就永远存在* cookie与本地存储的区别* 1. cookie也是存在本地* 2. cookie存储的数据量小 一般4KB左路* 3.原创 2016-11-23 15:51:12 · 331 阅读 · 0 评论 -
js滚动刷屏小实例
*{margin: 0;padding: 0;}div{line-height: 40px;border: 1px solid red;}第1屏第2屏第3屏第4屏第5屏第6屏第7屏第8屏第9屏第10屏第11屏第12屏第13屏第14屏第15屏第16屏第17屏第18屏第19屏第20屏原创 2016-11-23 15:12:24 · 806 阅读 · 0 评论 -
js页面滚动条到页面的距离
//1.给窗口添加滚动事件 window.onscroll = function(){//2. 获取滚动时 滚动条到页面的距离var sTop = document.documentElement.scrollTop || document.body.scrollTop;console.log(sTop);}原创 2016-11-23 15:04:10 · 4511 阅读 · 0 评论 -
获取元素到页面的距离
* {margin: 0;padding: 0;}.father {width: 500px;height: 500px;background: pink;margin: 100px auto;padding-top: 1px;position: relative;}.son {width: 200px;height: 200px;原创 2016-11-23 15:02:22 · 1477 阅读 · 0 评论 -
js随时判断网络状态
//定义一个按钮查看连接/*** 任何时候发请求前都可以去检查连接*/var online = 0;//1.自定义函数用于判断服务器连接状态function ping(callback){//2.实例化对象 var img = new Image();//3.设置SRC img.src = '01.php'原创 2016-11-23 14:58:12 · 2483 阅读 · 0 评论 -
js使用预加载判断网络状态
// 首先,先定义一个按钮。 查询网络连接 //0.声明一个变量保存连接状态var online = 0;//1.实例化对象 var img = new Image();//2.设置SRC地址 img.src = '01.php';//3.添加加载事件 img.onloa原创 2016-11-23 14:55:09 · 954 阅读 · 0 评论 -
js的模态窗口实例
打开注册×注册呵呵哒呵呵哒关闭保存原创 2016-11-06 13:42:37 · 498 阅读 · 0 评论 -
js中cookie
/*** cookie是通过请求头发送 * 优点:* 1. 存储在本地* 2. 浏览器全兼容* 缺点:* 1. 每次都要发请求* 2. 在请求头明文不安全* 3. 存储量小 一般浏览器4KB ~8KB* 注意:* 1. 如果创建cookie时不指定日期 默认是会话cookie。关了就没了* 2. 指定过原创 2016-11-23 15:58:51 · 281 阅读 · 0 评论 -
js中cookie解析
//1.获取所有cookie document.cookievar cookies = document.cookie;var json = {};//2.将字符串通过;号拆开cookies = cookies.split(';');//3.遍历所有信息for(var i = 0; i//4.将每条数据以=号拆开var data原创 2016-11-23 16:01:18 · 732 阅读 · 0 评论 -
javascript——this指向
1、一般谁调用指向谁2、DOM 0级,Dom 2级 ——绑定事件的元素3、html——window4、 setInterval、setTimeout——window5、 闭包——window6、 自执行函数——window7、 call、apply——改变this指向8、 在函数中默认是window原创 2016-12-26 21:45:10 · 360 阅读 · 0 评论 -
javascript——事件
1、冒泡:事件从最具体的元素向上触发捕获:事件从最不具体的元素开始沿DOM树从上到下到事件的触发者结束。事件的传播机制:若同时存在,先执行捕获,事件触发者,再执行冒泡。2、DOM0级绑定事件:以冒泡处理,只有一个函数覆盖。元素.onclick = function(){ }元素.onclick = null;3、DOM2级元素.addEventListener (cl原创 2016-12-26 21:42:23 · 349 阅读 · 0 评论 -
javascript——Dom
node节点:1、node节点分为6种:Document(文档):nodeName(#document),nodeType(9),value()、DocumentType(文档类型):nodeName(html),nodeType(10),value(null)、Element(元素):nodeName(标签名),nodeType(1),value(undefined、null原创 2016-12-26 18:21:40 · 342 阅读 · 0 评论 -
javascript——Math、Date
Math:1、Math.floor:向下取整2、Math.ceil:向上取整3、Math.round:四舍五入,若为负数,+0.5用floor。4、Math.abs:转化为绝对值5、Math.max:最大值,只用于数字。6、Math.pow(底数,指数):2的2次方7、Math.sqrt(底数,指数):根号38、Math.random():返回0-1 ,0可取到原创 2016-12-26 17:31:02 · 357 阅读 · 0 评论 -
javascript——对象、函数
对象定义:1、var obj = {};2、var obj = new Object();3、var obj = Object.creat(null);属性方法:1、var obj = {p :‘hello world’,q:‘sunny’}其中:obj为对象名,p和q为键名,后面为键值。若键值为函数,则p为方法。读取属性:obj.p或 obj['p']。原创 2016-12-26 17:15:03 · 326 阅读 · 0 评论 -
javascript——字符串
定义 :var a=“abc”;var b=“def”;属性:1、长度:a.length //32、拼接:a.concat(b); //bacdef3、b字符的索引值:a.indefOf('b') //1 若没有该字符:则返回-1。若重复,则值取到第一个。4、a.lastIndexOf('c') //35、截取字符串substr(3,5):从第三个开原创 2016-12-26 16:14:11 · 266 阅读 · 0 评论 -
javascript——数组
定义:1、var arr = new Array();2、var arr = [1,'abc',4];属性:1、在头部添加:unshift2、将第一个移除:shift3、在最后面添加:push4、将左后一个移除:pop5、截取:arr.splice(开始位置,个数) //截取的东西6、arr.slice(开始位置包括本身,结束位置不包括本身)7、连接:arr原创 2016-12-26 16:39:31 · 275 阅读 · 0 评论 -
javascript中一些简单的知识点
1、组成:BOM(浏览器模型),DOM(文档模型),ECMAScript。ECMAScript和js本质相同,ECMAScript是js的规范,js是ECMAScript的实现。js从上往下,边解析边执行。2、变量命名:以字母、下划线、$开头。不允许为数字。3、数据类型:基本:undefined、null、布尔、number、string。引用:object。4、1/0位num原创 2016-12-26 15:59:03 · 337 阅读 · 0 评论 -
javascript中的事件委托实例
//样式 #d1{width: 400px;height: 400px;background: pink; } #d2{width: 300px;height: 300px;background: yellow; } #d3{width: 200px;height: 200px;background: black; }原创 2016-11-06 13:19:05 · 329 阅读 · 0 评论 -
javascript 数组随机排序
html>html>head lang="en"> meta charset="UTF-8"> title>title>head>body>script> //第一种/* var arr=[1,2,3,4,5,6,7]; function suiji(arr){ for(var i=0;i<arr.length;i++){原创 2016-09-25 16:23:16 · 313 阅读 · 0 评论 -
javascript 今年的倒计时
今年的剩余时间为:停止//自己想的 function left(){ var span2 = document.getElementsByClassName("timee").item(0); var today = new Date(); var EndYear = new Date(today.getF原创 2016-09-25 15:37:50 · 385 阅读 · 0 评论 -
javascript 慢慢返回顶部
body{height: 4000px;position: relative;} div{color:red;position:fixed;right:50px;bottom:30px;cursor:pointer;display:none} 返回顶部 var d1 =document.getElementById("d1");原创 2016-09-25 15:36:16 · 1016 阅读 · 0 评论 -
javascript 冒泡和快速排序
排序算法 //冒泡排序 从小到大 将每一个数和他后面的数比较,前面的若大于后面的则调换位置 var arr=[3,5,2,4,6,1]; function maopao(a){ for(var i=1;i for(var j=0;j if(a[j]>a[原创 2016-09-25 15:27:21 · 284 阅读 · 0 评论 -
javascript 数组去重三种方法
//第一种方法:数组splice方法 function quchong(){ var arr=[3,5,6,1,6,7,9,4,2,5,9,8]; for(var i=0;i for(var j=i+1;j if(arr[i]==arr[j]){ arr原创 2016-09-25 15:22:50 · 320 阅读 · 0 评论 -
javascript 5秒钟刷新和页面title滚动
Hello,节点属性,你真棒,Hi,Hi~ //刷新,重新加载 var d1 = document.getElementById("d1"); var i=0; function sx(){ if(i>=5){ document.location.reload(); }原创 2016-09-25 15:16:41 · 549 阅读 · 0 评论 -
javascript 随机取任意四个字母和随机生成一个名字
Math对象名字随机生成的名字是:// //随机取任意四个字母 var str="aporhjbmvncjrovmbxvzzoeclolmqlpvsdffgfgf"; function ss(a,b){ var fanhui=""; for(var i=0;i var原创 2016-09-25 15:14:34 · 9401 阅读 · 2 评论 -
javascript 找到第二个参数的位置
//第一种方法 var str="aslfjeodgjuofhbmgl"; function zz(a,b){ var arr= a.split(""); var arr1=[];// console.log(a.indexOf(b));// console.log(arr); for原创 2016-09-25 15:11:37 · 993 阅读 · 0 评论 -
javascript中的 以你之姓,惯我之名
//函数调用 function love(man,woman){ console.log(man); console.log(woman); console.log(man.slice(0,1)+woman.substr(1));// console.log(man.substring(0,1)+woman.su原创 2016-09-25 15:10:13 · 532 阅读 · 0 评论 -
javascript 动态创建元素和数据
/*height:2090px;*/ body{background: #e1e1e1;} .all{ width:910px;margin: 0px auto;background:#fff;} .nav{width:910px;height:40px;background: #f6f6f6; } .nav ul{}原创 2016-09-25 15:39:39 · 287 阅读 · 0 评论 -
javascript 图片放大镜
图片放大镜 #d1{position: relative;cursor: pointer;width: 349px;height: 220px;float: left;} #img1{position: relative;} span{display:none;width:50px;height:50px;background: y原创 2016-09-25 15:45:20 · 363 阅读 · 0 评论 -
javascript url解析为对象
location.search截取 //?name=xiaohua&age=19&tel=123456789 varsearch=location.search.replace(/^\?/,"").split("&"); var obj={}; for(var i=0;i var arr=search[i].split("=");原创 2016-09-25 16:01:03 · 592 阅读 · 0 评论 -
javascript 向上滚动表格
*{ margin: 0; padding: 0; } .con{ width: 50%; margin: 0 auto; height: 400px; overflow: hidden;原创 2016-09-25 16:14:29 · 640 阅读 · 0 评论 -
javascript Tooltips
#div1{width:400px;height: 380px;border:1px solid deeppink;margin:100px auto;} #p1{line-height: 30px;margin:25px;} a{text-decoration: none;color:deeppink;} .titlebox{font-siz原创 2016-09-25 16:13:40 · 346 阅读 · 0 评论 -
javascript 淘宝右侧小选项卡
淘宝标题 *{ padding:0; margin:0;} .tab{ width:320px; height:100px; border:1px solid #eee; margin:10px; overflow:hidden;} .tab_title{ height:27px; background-color:#f7f7f7;原创 2016-09-25 16:12:50 · 447 阅读 · 0 评论 -
javascript 关于Bom的小实例
textarea{ width: 400px; height: 600px; border:1px solid deeppink; outline: none; } #ul{ background: #f5f5f5;原创 2016-09-25 16:03:24 · 390 阅读 · 0 评论 -
javascript This指向问题简述
1、一般谁调用指向谁2、DOM 0级,Dom 2级 ——绑定事件的元素3、html——window4、 setInterval、setTimeout——window5、 闭包——window6、 自执行函数——window7、 call、apply——改变this指向8、 在函数中默认是window this关键字的用法 a、作为普通函数调用原创 2016-09-25 15:56:24 · 256 阅读 · 0 评论 -
javascript 原型链---继承方式怎么实现继承
function Father(money, house, car) { this.money = money; this.house = house; this.car = car; } Father.prototype.chuliMoney = function () { console.log("全扔给我原创 2016-09-25 15:54:37 · 358 阅读 · 0 评论 -
javascript Event兼容封装
/** * Created by zc on 2016/9/5. */ //跨浏览器处理事件程序 用对象var Event = { addEvent: function (ele,type,handler) { //Dom2级处理 if(ele.addEventListener){ ele.add原创 2016-09-25 15:47:27 · 290 阅读 · 0 评论 -
javascript——BOM
1、重绘:样式改变即为重绘回流:当大小改变时即为回流。回流一定重绘,重绘不一定回流。回流有可能改变其他元素的位置,会大量的重绘,所以占内存较多。2、加载协议:http:超文本传输协议,默认脑端口号80https:加密。 由浏览器决定,选择加载速度较快的。3、定时器:setInterval(function(){},1000) :间隔调用clearInterval原创 2016-12-26 21:57:36 · 355 阅读 · 0 评论