自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(46)
  • 资源 (1)
  • 收藏
  • 关注

原创 简单js动态创建表格

<body> <style> #box table { border-collapse: collapse; border-spacing: 0px; } </style> <div id="box"></div><!-- 模拟服务器数据 --> <script type="text/jav...

2019-12-03 23:46:49 333

原创 简单js菜单高亮切换

<style> #menu ul .current { background-color: burlywood; } #menu ul li { width: 80px; height: 30px; line-height: 30px; background-color: beige; text-align: center; fl...

2019-12-02 22:49:14 344

原创 js简单实现全选功能

<style> td,th { border: 1px solid #ccc; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px;...

2019-12-01 23:29:08 741

原创 去url中?后的字段赋给一个对象,使用键值对形式存储

<script> function getParams(url){ // https://passport.baidu.com/center?_t=1574864269 // 取url?后的字符串并存储为对象 var o={}; //最终对象 // 将字符串从?处截断,存放在array数组中 var array=url.split('?');...

2019-11-27 22:35:18 255

原创 数组排序

<script> // 数组排序 function sort(array,fnCompare){ for(var i=0;i<array.length-1;i++){ for(var j=0;j<array.length-i-1;j++){ if(fnCompare(array[j],array[j+1])>0){ var...

2019-11-25 23:19:44 97

原创 数组排序,取最值,判断平闰年,判断是一年中的哪一天

<script type="text/javascript"> // 分隔符 // var arr=[5,8,6,2,7]; // var str=arr[0]; // var space="|"; // for(var i=1;i<arr.length;i++){ // str+=space+arr[i]; // } // console.l...

2019-11-17 18:56:28 153

原创 js倒三角正三角正方形乘法表

<script> // 正方形 var str=''; for(var i=0;i<10;i++){ for(j=0;j<10;j++){ str+='* '; } str+='\n'; } console.log(str); // 正三角 var zStr=''; for(var i=0;i<10;i+...

2019-11-14 23:02:43 368

原创 搜索框

<style> .w { width: 990px; margin: 0 auto; padding: 0 0; } .wrap { height: 200px; background-color: #eee; text-align: center; } .wrap span...

2019-11-03 23:31:11 97

原创 轮播图下方小按钮,鼠标悬停后变大显示外圈

轮播图下方小按钮,鼠标悬停后变大显示外圈。<style> li { list-style: none; } a { text-decoration: none; } .wrap { height: 300px; } .wrap div { border: 1px solid red; } .wrap>div&gt...

2019-11-03 16:07:27 293

原创 hover一个元素的样式时需要是父子关系,隐藏盒子css不需要隐藏样式写法,比较麻烦,不知道有没有优点

默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式,被改变的元素必须是被hover元素的子元素,但你现在container和wrap不是父子关系,而是兄弟关系,那么你必须要这样设置了。.container:hover +.wrap{ background: red;}...

2019-10-30 23:33:50 1343

原创 改变li中a的字体颜色,不能使用li:hover

<li> <a>111</a></li>a { color: #fff;}li:hover { /* 这样是无效的,因为权重不够*/ color: yellow; }li a:hover { color:yellow;}

2019-10-27 00:23:51 2612 3

原创 两边盒子固定宽度,中间盒子自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两边固定中间自适应布局</title></head><body> <!-- 第一种 --> <!-- <style> ...

2019-10-22 23:31:49 693

原创 纯css小黄人

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小黄人</title> <link rel="stylesheet" href="css/xhr.css"></head><body> &l...

2019-10-22 23:24:36 1881

原创 使用animation实现匀速无缝循环滚动动画,鼠标悬停停止运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝轮播</title> <!-- 运动 --> <!-- voison:0.1 1 2 3 4 5 6 1 1走到6再到1,这时如果没有1这张图就有一...

2019-10-20 13:20:42 6508 1

转载 icon图标制作

&lt;!--在网址后面添加/favicon.ico即可查询--&gt;&lt;!--https://www.baidu.com/favicon.ico--&gt;&lt;!--ico图片要放在根目录--&gt;&lt;!--&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;

2019-03-02 04:21:39 577

转载 自定义滚动条

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/com.js"&gt;&

2019-01-17 00:54:19 244

转载 图片跟着鼠标飞 封装鼠标xy轴的获取

&lt;script&gt; var evt = { //window.event和事件参数对象e的兼容 getEvent: function(evt) { return window.event || evt; }, //可视区域的横坐标兼容 getClientX: function(evt) { return this.getEvent(ev...

2019-01-16 22:07:48 521

转载 多个属性样式同时变化

/** * 例子:getStyle(my$("box"),"height") * 获取一个元素的任意样式属性 返回一个字符串类型 * @param {Object} ele 元素 * @param {Object} attr 样式属性 */function getStyle(ele, attr) { return window.getComputedStyle ? window.g...

2019-01-16 00:01:19 234

转载 滑动滚动条固定一个div到顶部

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/com.js"&gt;&lt;

2019-01-15 03:09:21 1756

原创 轮播图

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/com.js"&gt;&lt;

2019-01-14 22:42:03 76

转载 简单移动动画

&lt;body&gt; &lt;input type="button" id="btn" value="移动400px"/&gt; &lt;input type="button" id="btn_" value="移动800px" /&gt; &lt;div id="dv"&gt; &

2019-01-13 19:48:32 111

转载 利用定时器写一个协议按钮禁用,渐变

&amp;lt;textarea rows=&quot;50&quot; cols=&quot;50&quot;&amp;gt;我是通过cols和rows定的大小,我的cols是20,rows是10&amp;lt;/textarea&amp;gt; &amp;lt;input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;请仔

2019-01-13 16:57:24 91

转载 星星一闪一闪

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #dv{ position: relative; height: 600px; width: 500px;

2019-01-13 01:16:13 576

转载 定时器写图片抖动

图片抖动&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; img{ height: 150px; width: 250px; } #dv{ positio

2019-01-13 00:53:46 197

转载 定时器和BOM

定时器和BOM&amp;lt;body&amp;gt;&amp;lt;input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;按钮&quot;/&amp;gt;&amp;lt;input type=&quot;button&quot; id=&quot;btn_&quot; value=&quot;停止定

2019-01-13 00:21:58 201

转载 模拟百度搜索框

模拟百度搜索 &lt;body&gt; &lt;div id="box"&gt; &lt;input type="text" id="txt" class="txt"/&gt; &lt;input type="button" value="搜索" /&gt; &lt;script&gt;

2019-01-12 14:59:58 359

转载 绑定多个事件 不冲突

&lt;body&gt; &lt;!----&gt; &lt;input type="button" value="按钮" id="btn"/&gt; &lt;script&gt; function addEventListener(ele,type,fn){ if(ele.addEventListener){ ele.addEventListener(type

2019-01-07 03:59:51 309

转载 节点 隔行变色 body图片替换

&lt;body&gt; &lt;div class="box" id="box"&gt; &lt;div id="divSpan" class="divSpan"&gt; &lt;span&gt;娱乐&lt;/span&gt; &lt;span id="sp"&gt;新闻&lt;/spa

2019-01-07 02:05:48 1187 3

原创 练习1

列表突出显示&lt;body&gt; &lt;ul id="ul_"&gt; &lt;li&gt;&lt;p&gt;2112&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;2112&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p

2018-12-26 20:15:46 104

原创 点击小图,显示大图(后续需要修改)

&lt;body&gt; &lt;div id="dv"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="img/1.jpg" title="1" id=""&gt; &lt;img src="img/1.jpg" id=""/&gt;

2018-12-25 03:41:12 138

转载 阻止链接跳转,可以用来获取href中的值

&lt;body&gt; &lt;!--&lt;a href="http://www.baidu.com" id="ak"&gt;百度&lt;/a&gt; &lt;script&gt; function my$(id){ return document.getElementById(id); } my$("ak").onclick=function(){

2018-12-25 02:57:20 206

转载 开关灯

&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .cls{ background-color: black; } &lt;/style&gt; &lt;/head&gt;&lt

2018-12-24 02:32:47 251

原创 点击图片显示另外一张图片

&lt;body&gt; &lt;img src="img/im1.jpg" id="im" alt="我的世界1" /&gt; &lt;script&gt; // 将document.getElementById(id)封装 精简代码 function my$(id){ return document.getElementById(id); } my$("im

2018-12-24 02:22:26 3229

原创 按钮排他功能

&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; /** * 可以用来写轮播图的按钮和导航按钮 */ &lt;/script&gt; &

2018-12-24 01:36:58 221

原创 day7

&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; /** * xml 侧重存储数据 * html 侧重展示数据,信息 html文件可以看成一个文档,这个文档就是一个对象 * 文档中的舍友标签都

2018-12-24 01:20:50 120

转载 Array

/** * .isArray(对象) 判断对象是否为数组 * .concat(数组) 拼接数组 * .every(函数) 返回值为布尔类型,函数作为参数使用,函数中有三个参数,第一个为元素的值 * 第二个为索引,第三个是原来的数组(一般不使用) * 如果这个数组中的每个元素都符合条件则返回true * .filter(函数) 返回符合条件的数组...

2018-12-23 01:38:12 83

原创 String

/** String 是一个对象 字符串可以看成是字符组成的数组,但js中没有字符类型 字符是一个一个的,在别的语言中字符用一队单引号括起来 在js中字符串可以使用单引号也可以使用双引号 因为字符串可以看成是数组,所以可以使用for循环遍历 字符串特性: 字符串的值不可改变,当给字符串重新赋值时,括起来值改变了,其实是 指向改变了,原来的值...

2018-12-23 00:36:11 83

原创 利用随机数产生随机颜色和计算日期

&amp;lt;script&amp;gt; //随机16进制的颜色 function getCor(){ var str=&quot;#&quot;; var arr=[0,1,2,3,4,5,6,7,8,9,&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&amp

2018-12-22 02:56:43 163

原创 day5

&lt;script&gt; function createObj(name,age){ var obj=new Object(); obj.name=name; obj.age=age; obj.play=function(){ console.log(name+"在玩游戏。"); } return obj; } consol...

2018-12-22 02:12:29 75

转载 关于typeof和instanceof的区别

https://www.cnblogs.com/double405/p/5326311.html

2018-12-22 00:48:36 73

利用transfromes属性制作css小黄人

利用transfromes属性制作css小黄人,大量使用定位和伪元素

2019-10-22

空空如也

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

TA关注的人

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