码农的N次方-CSDN博客

原创原生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

原创 JS实现给对象添加className.

利用函数返回值

2017-06-28 17:51:21 2278 1

原创元素的水平垂直居中的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

原创 CSS属性margin负值与float效果浅谈

暂时只能了解这么多，以后可能会补充。

2017-06-19 23:11:37 1115

原创 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

原创 CSS选择器“~”与“+”

a~b 匹配a元素之后的同级元素b，无论直接相邻与否a+b 直接相邻选择器，匹配a元素之后的相邻的同级元素b。

2017-06-17 19:08:20 238

原创 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

原创 CSS3实现简单特效实例（1）

最终效果为图一变为图2.注意：本例需要用到skew和伪类before，新手不懂的或者老手忘了的可以自行百度。

2017-06-17 16:19:29 450

原创原生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实现走马灯效果

原生JS实现走马灯效果以及本例中用到了一点函数封装思想封装了一个能控制速度大小的走马灯效果。

2017-06-13 19:38:14 5889

原创原生JS星级评分

本例中关键思路是获取当前索引值，然后与剩余的索引值作比较。希望对初学者有所帮助~~

2017-06-13 16:49:20 287

原创原生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中有多个相同元素时，怎样将每个元素都绑定一个独立开关呢？

关键思路：可以给每一个元素定义一个属性。

2017-06-11 22:51:58 598

转载 HTML DOM element.nextElementSibling属性

HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素使用nextElementSibling属性返回指定元素之后的下一个兄弟元素，（即：相同节点树层中的下一个元素节点）。nextSibling属性与nextElementSibling属性的差别：nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释

2017-06-08 21:44:37 4010

qq_38384536的博客