js
XiaoXiongV
这个作者很懒,什么都没留下…
展开
-
简单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 · 334 阅读 · 0 评论 -
简单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 · 345 阅读 · 0 评论 -
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 · 742 阅读 · 0 评论 -
去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 阅读 · 0 评论 -
数组排序
<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 · 99 阅读 · 0 评论 -
数组排序,取最值,判断平闰年,判断是一年中的哪一天
<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 阅读 · 0 评论 -
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 · 369 阅读 · 0 评论 -
模拟百度搜索框
模拟百度搜索 <body> <div id="box"> <input type="text" id="txt" class="txt"/> <input type="button" value="搜索" /> <script>转载 2019-01-12 14:59:58 · 359 阅读 · 0 评论 -
定时器和BOM
定时器和BOM&lt;body&gt;&lt;input type="button" id="btn" value="按钮"/&gt;&lt;input type="button" id="btn_" value="停止定转载 2019-01-13 00:21:58 · 202 阅读 · 0 评论 -
星星一闪一闪
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> #dv{ position: relative; height: 600px; width: 500px;转载 2019-01-13 01:16:13 · 597 阅读 · 0 评论 -
利用定时器写一个协议按钮禁用,渐变
&lt;textarea rows="50" cols="50"&gt;我是通过cols和rows定的大小,我的cols是20,rows是10&lt;/textarea&gt; &lt;input type="button" id="btn" value="请仔转载 2019-01-13 16:57:24 · 92 阅读 · 0 评论 -
简单移动动画
<body> <input type="button" id="btn" value="移动400px"/> <input type="button" id="btn_" value="移动800px" /> <div id="dv"> &转载 2019-01-13 19:48:32 · 114 阅读 · 0 评论 -
轮播图
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/com.js"><原创 2019-01-14 22:42:03 · 77 阅读 · 0 评论 -
滑动滚动条固定一个div到顶部
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/com.js"><转载 2019-01-15 03:09:21 · 1757 阅读 · 0 评论 -
多个属性样式同时变化
/** * 例子: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 · 235 阅读 · 0 评论 -
图片跟着鼠标飞 封装鼠标xy轴的获取
<script> 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 · 522 阅读 · 0 评论 -
自定义滚动条
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/com.js">&转载 2019-01-17 00:54:19 · 245 阅读 · 0 评论 -
icon图标制作
<!--在网址后面添加/favicon.ico即可查询--><!--https://www.baidu.com/favicon.ico--><!--ico图片要放在根目录--><!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />转载 2019-03-02 04:21:39 · 578 阅读 · 0 评论 -
绑定多个事件 不冲突
<body> <!----> <input type="button" value="按钮" id="btn"/> <script> function addEventListener(ele,type,fn){ if(ele.addEventListener){ ele.addEventListener(type转载 2019-01-07 03:59:51 · 312 阅读 · 0 评论 -
节点 隔行变色 body图片替换
<body> <div class="box" id="box"> <div id="divSpan" class="divSpan"> <span>娱乐</span> <span id="sp">新闻</spa转载 2019-01-07 02:05:48 · 1190 阅读 · 3 评论 -
day1
var num=100;// alert(num);//弹窗打印// Console.log(num); //打印在浏览器的控制台上 数值交换 var num1=100; var num2=200; var temp; temp=num1; num1=num2; num2=temp;// alert(“num1=”+num1);// a...原创 2018-12-16 21:13:18 · 102 阅读 · 0 评论 -
day2_switch_计算平闰年_乘法表_continue和break的区别
var jibie="C"; switch(jibie){ case "A" :console.log("90-100");break; //case后的break可以省略 且比较是严格比较 “10”==10 返回的是true “10”===10 返回的是flase case "B" :console.log("90-80");break; case "C&q原创 2018-12-16 21:20:19 · 112 阅读 · 0 评论 -
day3_数组
// 数组存储的类型可能不同,不过一般是一样的// 数组的长度是可变的 var arr=[10,9,11,8,3]; var arr2=new Array(5); var arr3=new Array(2,5,9,4,1); console.log(arr1); console.log(arr2); console.log(arr3);//数组遍历 ...原创 2018-12-17 00:07:57 · 89 阅读 · 0 评论 -
day4
计算最大值(两个数) function getMax(num1,num2){ return num1>num2?num1:num2; } console.log(getMax()); console.log(getMax(10,20));计算最大值(三个数) function getMaxs(num1,num2,num3){ return num1>...原创 2018-12-17 02:39:01 · 61 阅读 · 0 评论 -
关于typeof和instanceof的区别
https://www.cnblogs.com/double405/p/5326311.html转载 2018-12-22 00:48:36 · 73 阅读 · 0 评论 -
day5
<script> 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 阅读 · 0 评论 -
利用随机数产生随机颜色和计算日期
&lt;script&gt; //随机16进制的颜色 function getCor(){ var str="#"; var arr=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e",&原创 2018-12-22 02:56:43 · 166 阅读 · 0 评论 -
计算这是这一年中的哪一天
//输入年月日 计算这是这一年中的哪一天 function getDays(year,month,day){ //使用一个数组承载一年12个月的天数 var arrMonth=[31,28,31,30,31,30,31,31,30,31,30,31]; //如果是一月份直接输出day即可 if(month<2&&month>0){ ...原创 2018-12-17 22:33:46 · 246 阅读 · 0 评论 -
String
/** String 是一个对象 字符串可以看成是字符组成的数组,但js中没有字符类型 字符是一个一个的,在别的语言中字符用一队单引号括起来 在js中字符串可以使用单引号也可以使用双引号 因为字符串可以看成是数组,所以可以使用for循环遍历 字符串特性: 字符串的值不可改变,当给字符串重新赋值时,括起来值改变了,其实是 指向改变了,原来的值...原创 2018-12-23 00:36:11 · 86 阅读 · 0 评论 -
Array
/** * .isArray(对象) 判断对象是否为数组 * .concat(数组) 拼接数组 * .every(函数) 返回值为布尔类型,函数作为参数使用,函数中有三个参数,第一个为元素的值 * 第二个为索引,第三个是原来的数组(一般不使用) * 如果这个数组中的每个元素都符合条件则返回true * .filter(函数) 返回符合条件的数组...转载 2018-12-23 01:38:12 · 83 阅读 · 0 评论 -
伪数组和函数表达式
//arguments 伪数组 function f1(){ var sum=0; for (var i=0;i<arguments.length;i++) { sum+=arguments[i]; } return sum; } console.log(f1(20,10,30)); //函数表达式大括号后要加分号 var f1=fu...原创 2018-12-17 23:52:24 · 77 阅读 · 0 评论 -
day7
<html> <head> <meta charset="utf-8" /> <title></title> <script> /** * xml 侧重存储数据 * html 侧重展示数据,信息 html文件可以看成一个文档,这个文档就是一个对象 * 文档中的舍友标签都原创 2018-12-24 01:20:50 · 121 阅读 · 0 评论 -
按钮排他功能
<html> <head> <meta charset="utf-8" /> <title></title> <script> /** * 可以用来写轮播图的按钮和导航按钮 */ </script> &原创 2018-12-24 01:36:58 · 221 阅读 · 0 评论 -
点击图片显示另外一张图片
<body> <img src="img/im1.jpg" id="im" alt="我的世界1" /> <script> // 将document.getElementById(id)封装 精简代码 function my$(id){ return document.getElementById(id); } my$("im原创 2018-12-24 02:22:26 · 3231 阅读 · 0 评论 -
开关灯
<html><head> <meta charset="utf-8" /> <title></title> <style> .cls{ background-color: black; } </style> </head><转载 2018-12-24 02:32:47 · 252 阅读 · 0 评论 -
阻止链接跳转,可以用来获取href中的值
<body> <!--<a href="http://www.baidu.com" id="ak">百度</a> <script> function my$(id){ return document.getElementById(id); } my$("ak").onclick=function(){转载 2018-12-25 02:57:20 · 208 阅读 · 0 评论 -
点击小图,显示大图(后续需要修改)
<body> <div id="dv"> <ul> <li> <a href="img/1.jpg" title="1" id=""> <img src="img/1.jpg" id=""/>原创 2018-12-25 03:41:12 · 138 阅读 · 0 评论 -
练习1
列表突出显示<body> <ul id="ul_"> <li><p>2112</p></li> <li><p>2112</p></li> <li><p原创 2018-12-26 20:15:46 · 105 阅读 · 0 评论