自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(43)
  • 收藏
  • 关注

原创 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 2224 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&quot

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 426

原创 保留两位小数

<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&gt

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=&quot

2018-03-12 16:13:52 187

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除