- 博客(26)
- 收藏
- 关注
原创 原生JS自定义滚动条
无标题文档*{ margin:0; padding:0}#box{ width:300px; height:400px; border:1px solid #ccc; position:relative; margin:100px auto; overflow:hidden}#box p{ position:absolute; left:0; margin-right:30px}
2017-06-29 09:58:56
351
原创 如何解决div里面的h4标题拖拽,并且实现div里面的文本能够选中和不能选中的问题
无标题文档*{ margin:0; top:0}.pop{ height:200px; width:200px; background:red; position:absolute;}h4{ line-height:40px; height:40px; background:#4A1D1D; color:#fff; cursor:move}windo
2017-06-28 18:05:46
603
原创 元素的水平垂直居中的4种方法
第一种方法html:css部分:#wrap{position:relative;}.box{position:absolute;top:0;left:0;right:0;bottom:0;margin auto;}第二种#wrap{position:relative;}.box{position:absolute;top:50%;left:50%
2017-06-28 16:58:58
267
原创 JS中阻止事件冒泡实例
无标题文档#main{ width:200px; height:200px; background:#ccc;}#subBox{ width:100px; height:100px; background:red;}window.onload=function(){var main=document.getElementById('mai
2017-06-27 23:00:02
230
原创 鼠标拖拽,阻止默认事件、事件冒泡。
无标题文档*{ margin:0; top:0}#box{ height:200px; width:200px; background:red; position:absolute; cursor:move}window.onload=function(){var oDiv=document.getElementById('box');var oInput=
2017-06-27 22:55:18
3679
原创 canvas实现雨滴效果
var c=document.getElementById("c");var ctx=c.getContext("2d");c.width=window.innerWidth;c.height=window.innerHeight;// ctx.fillRect(0,0,100,100);// a,b,c,d分别代表x方向偏移,y方向偏移,宽,高var string1 =
2017-06-27 18:11:37
490
原创 表单事件 onfocus与onblur,以及onsubmit与onreset
表单事件onblur 元素失去焦点onfocus 元素获得焦点onreset 重置按钮被点击onsubmit 提交按钮被点击onchange 内容改变时触发
2017-06-27 10:05:08
1027
原创 JS实现隔行换色
无标题文档*{ margin:0; padding:0}table{ width:500px;}table,th,td{ border:1px solid #ccc; border-collapse:collapse;}th,td{ height:30px; padding:0 5px}.tr_even_bg{ background:#efefef;}.over{ ba
2017-06-25 15:51:03
664
原创 用原生JS实现一个简单计算的功能实例
无标题文档 + - * / = var aInput=document.getElementsByTagName('input');var oBtn=document.getElementsByTagName('button')[0];var sel=document.ge
2017-06-25 14:24:26
456
原创 关于JS中的数据类型
console.log(typeof "判断的类型")用来判断类型,它有几个注意点1. 对null返回是'object',你却不能真正当对象使用2. 对NaN返回是'number',你却不能使用它进行算术运算3. 不能区分对象、数组、正则,对它们操作都返回'object'
2017-06-25 11:08:42
175
原创 CSS3+js实现简单的旋转圆环时钟效果实例
时钟的demo*{margin:0;padding:0;}.loading{margin:100px auto;width:25em;height:8em;position: relative;}.clock{position: relative;width:8em;height:8em;display: inline-block;}.loading .progress{pos
2017-06-18 14:13:08
1385
1
原创 原生JS实现简单抽人名功能实例
无标题文档.box{width:500px; height:200px; background:#D4D4D4; padding:100px;position: absolute;top: 0;left: 0;right: 0;bottom: 0; margin:auto;}.screen{width:100px; height:50px; margin:0 auto; backgro
2017-06-17 19:59:41
2754
原创 CSS3实现简单特效实例(2)
音乐*{margin:0;padding:0;}ul{list-style: none;}.music{width:50px;height:30px;padding:10px;background-color: green;position: absolute;left:0;right:0;top:0;bottom:
2017-06-17 17:03:17
287
原创 原生JS实现鼠标悬停图片显示文字效果
无标题文档*{ margin:0; padding:0}.box{ height:260px; width:400px; position:relative}.mask{ position:absolute; height:100%; width:100%; top:0; left:0; background:#000; opacity:.3; display:none}.su
2017-06-15 22:44:08
7485
2
原创 原生JS实现选项卡效果实例
无标题文档*{ margin:0; padding:0}ul{list-style:none}.wrap{ width:500px;}a{ text-decoration:none}.hide{ display:none}.tab { margin-bottom:20px;}.tab .tabList{ height:40px;}.tab .tabList li
2017-06-15 21:25:53
449
原创 原生JS字符串拼接实例
JavaScript字符串拼接基本注意点是,变量与字符串类型连接用“+”,可以参考以下实例加以理解。无标题文档var aBox=document.getElementsByClassName('box')[0]; //点击div 更换颜色/*var r=25;var g=124;var b=23
2017-06-14 15:42:51
1342
原创 原生js多级菜单启示录
二级菜单完整版*{ margin:0; padding:0; font-size:14px;}ul,li,ol{ list-style:none}a{ text-decoration:none;}.arrow{ border:5px solid transparent; font-size:0px; border-top-color:#fff; position:absolut
2017-06-12 20:43:04
359
原创 用原生JS实现简单的多选框功能
无标题文档全选//找到全选按钮var oChkAllBtn=document.getElementById('cheakAll');var oDiv=document.getElementsByTagName('div')[0];var aInput=oDiv.getElements
2017-06-12 15:07:24
1139
转载 HTML DOM element.nextElementSibling属性
HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素使用nextElementSibling属性返回指定元素之后的下一个兄弟元素,(即:相同节点树层中的下一个元素节点)。nextSibling属性与nextElementSibling属性的差别:nextSibling属性返回元素节点之后的兄弟节点(包括文本节点、注释
2017-06-08 21:44:37
4010
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人