- 博客(43)
- 收藏
- 关注
RSS订阅原创 bootstrap+vue做一个简易的todolist
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http:
2018-05-25 17:19:50
763
原创 prototype原型构造函数
<script> //1.构造函数对象方法 function Person(name,age) { //构造函数,首字母大写 var obj = {}; obj.name = name; obj.age = age; obj.showName = function () { ...
2018-03-28 12:12:30
210
原创 闭包版本的屏幕缩放事件
<body> <div id="demo"></div></body><script> var demo = document.getElementById("demo"); demo.innerHTML = window.innerWidth || document.documentElement.c
2018-03-27 17:08:22
210
原创 封装运动框架多个属性
<style> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; background-color: darkgoldenrod; position: absolute; t...
2018-03-26 08:52:17
146
原创 js获取内嵌或者外联样式函数封装
基础知识js访问css属性的两种方式：box.style.left 与 box.style["left"] box.style.left 只能获取行内样式，且不能传递参数，但是后者可以传递参数获取内嵌或者外联样式函数封装function getClass(obj,attr) { if(obj.curentStyle){ return obj.currentStyle...
2018-03-25 23:44:35
638
原创 缓动动画封装
<style> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; background-color: darkgoldenrod; position: absolute; t...
2018-03-25 22:47:52
169
原创 图片简单匀速滚动
<style type="text/css">*{ padding:0; margin:0; list-style:none; border:0;}.all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative;...
2018-03-25 14:15:55
993
原创 匀速动画封装
<body><button id="btn200">200</button><button id="btn400">400</button><div id="box1"></div></body><sty
2018-03-24 11:44:03
166
原创 点击空白处关闭对话框
<body><div><a href="#" id="btn">登录</a></div><div class="box" id="bbox"></div><div class="mask" id=
2018-03-21 19:18:26
1560
原创 阻止冒泡
<script> var btn = document.getElementById("btn"); document.onclick = function () { alert("点击了空白处") } btn.onclick = function (event) { var event = event || window...
2018-03-21 17:31:11
98
原创 改变窗口大小onresize
<script>//封装可视区域 window.onload = function () { function client() { if(window.innerWidth!=null) //ie9+ 最新浏览器 { return{ ...
2018-03-21 16:42:59
848
原创 封装可视区域
function client() { if(window.innerWidth!=null) //ie9+ 最新浏览器 { return{ width:window.innerWidth, height:window.innerHeight } } else if(do...
2018-03-21 16:34:22
105
原创 页面内跳转到指定位置
<style> *{ margin: 0; padding: 0; } html, body{ width: 100%; height: 100%; } ul,ol{ list-style: none; } #ul{ width: 10...
2018-03-21 14:21:13
2225
1
原创 跟随的广告
<body> <div class="left" id="lid"></div> <div class="right" id="rid"></div></body><style> *{ marg
2018-03-21 13:13:13
157
原创 固定导航栏
<body> <div class="top"></div> <div class="nav" id="g-nav"></div> <div class="content"></div> <
2018-03-21 11:51:08
167
原创 scroll封装及兼容性写法
<script> function scroll() { if(window.pageYOffset !=null) //ie9+及主流浏览器支持的格式 { return{ left:window.pageXOffset, top:window.pageYO...
2018-03-20 20:37:50
1637
原创 图片放大效果设计
<div class="box" id="fdj"> <!--小盒子--> <div class="small"> <img src="images/001.jpg" alt=""/> <div class="mask"
2018-03-20 13:54:04
169
原创 事件对象（event）
<div class="demo" id="dem"></div><style> *{ margin: 0; padding: 0; } .demo{ width: 400px; height: 400px; background-color: dark...
2018-03-20 11:32:02
121
原创 offsetLeft style.Left 的区别
offsetLeft style.Left 的区别一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以 只有定位的盒子 才有 left top right 二、offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。 style.left = 300px parseIn...
2018-03-19 17:38:38
242
原创 匀速滚动/缓动
<style> *{ margin: 0; padding: 0; } .bdiv{ width: 100px; height: 100px; margin-top: 100px; margin-left: 0; background-color: d...
2018-03-18 12:52:14
274
原创 无缝滚动
<style> *{ margin: 0; padding: 0; } ul { list-style: none; } .box{ width: 452px; height: 176px; margin: 100px auto; po...
2018-03-18 12:07:36
98
原创 选择文件格式判断
<div> <input type="file" id="iid"><span></span> </div><script> var ttt = document.getElementById("iid"); ttt.onchange = func
2018-03-18 10:59:50
427
原创 保留两位小数
<script> var pi = 3.143592653; var str = pi+""; console.log(str.substr(0,str.indexOf(".")+3)); console.log(parseInt(pi*100)/100); console.log(pi.toFixed(2));</script>
2018-03-18 10:38:53
336
原创 逻辑运算符
&& 的优先级高于 ||；1.a&&b a为真则返回b，a为假则返回a;2.a||b a 为真则返回a，a为假则返回b；console.log(0||3&&2) 先算3&&2返回2，再算0||2，结果是2...
2018-03-17 12:21:43
134
原创 图片滚播
<style> .box{ width: 1080px; height: 1080px; margin: 100px auto; position: relative; border: 1px solid burlywood; overflow: hidden; } ...
2018-03-16 17:41:10
350
原创 页面自动跳转与函数递归以及（arguments.callee）
<div id="demo"></div><script> var demo = document.getElementById("demo"); var num = 5; setTimeout(tim,1000); function tim() { num--; demo.innerHTML =...
2018-03-16 16:23:14
212
原创 发送短信
<div> <input type="text"><button id="btn">发送短信</button></div><script> var btn = document.getElementById("btn"); var timer = nul
2018-03-16 14:01:25
137
原创 时钟
<style> .clock { width: 600px; height: 600px; margin:50px auto; background: url(images/clock.jpg) no-repeat; position: relative; } .clock div ...
2018-03-16 12:13:21
140
原创 倒计时
<div class="dingshiqi" id="dsqi"></div><script> var dsqi = document.getElementById("dsqi"); var endTime = new Date("2018/6/6 12:00:00"); function clock() {
2018-03-15 21:10:49
95
原创 日历
<script> var date = new Date(); var arr=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"] document.getElementById("nyr").innerHTML = date.getFullYear() + &q
2018-03-15 18:37:18
196
原创 微博发布
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ m
2018-03-15 17:43:53
127
原创 图片滚动中小图标设计
<style> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } .box{ width: 226px; height: 176px; margin: 100px auto; ...
2018-03-15 11:54:09
128
原创 分割、封装类名 完整版
<div id="did"> <div class="demo"></div> <div class="demo text"></div> <div class="demo"></div>
2018-03-14 16:14:54
121
原创 数组基础知识
<!--数组基础知识--><script> //1.添加数组 var arr1 = [1,3,5]; arr1.push(7); console.log(arr1); //数组后面添加数值 输出[1，3，5，7] var arr2 = [1,3,5]; arr2.unshift(7); console.log(a...
2018-03-14 14:18:35
123
原创 星座运势
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:
2018-03-14 13:37:21
376
原创 三种循环语句及switch语句
1.for(参数；条件；方法){语句}；for(var i=1; i<=100; i++){var sum=0;sum+=i;}2.while(条件){语句}；var i=1;while(i<=100){var sum=0;sum+=i;i++;}3.do{语句} while（条件）var i=1;do{var sum=0;sum+=i;i++;}while(i<=100);4....
2018-03-12 20:37:40
10214
原创 tab切换菜单/闭包
<style>.current{ background: pink;}.bigbox{ width: 400px; margin: 100px auto; border: 1px solid #d4629d;}.but div{ width: 400px; height: 300px...
2018-03-12 19:03:24
392
原创 排他思想tab
<style> .current{background-color=pink}; <style><div id="paita"> <button>排他思想</button> <button>排他思想</button> <button
2018-03-12 16:54:20
197
原创 仿淘宝输入框
<style>.box{ width: 300px; height: 30px; position: relative; color: #cccccc; margin:300px auto; } ...
2018-03-12 16:15:25
477
原创 全选/取消/反选
<div id="box"> <button>全选</button> <button>取消</button> <button>反选</button></div><div> <ul id="
2018-03-12 16:13:52
187
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人