2017年04月_sweetllh

原创 js实现图片淡入淡出

效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)<!DOCTYPE html><html> <head> <meta charset="utf-8" />

2017-04-25 19:11:10 2693

原创表格排序和加升符、降符

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> table{border:1px solid black; width: 500px;border-collapse: collapse; }

2017-04-25 15:11:16 481

转载 JS实现点击表头表格自动排序（含数字、字符串、日期）

<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS实现点击表头表格自动排序（含数字、字符串、日期）</title><style>#tableSort{moz-user-

2017-04-25 15:06:02 2212 2

转载 JS学习之表格的排序简单实例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="排序"> <table id="tab1" width="200" border="1" cellpadding=

2017-04-25 00:47:26 288 1

转载用js实现两个select下拉框之间的元素互相移动

Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getEleme

2017-04-25 00:38:57 1758

转载 Js选择框脚本移动操作select 标签中的 option 项的操作事项

题目：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。如下：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。此问题需用到选择框脚本的一些关键属性：add(newOption,relOption):向控件中插入新的元素，其位置在置顶项（relOption)之前，不指定relOption就添加到最后；options:控件中所有元

2017-04-24 21:39:01 875

原创 js移动表格数据和给表格数字排序

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> table{border:1px solid black; width: 500px;border-collapse: collapse; }

2017-04-24 17:13:51 515

原创 js基础 - 查找/忽略大小 - 查找/模糊查询 - 查找/多关键字 - 查找/筛选 - 查找

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input type="text" value="输入需要查找的人名" id="studentName" />

2017-04-24 14:55:13 1162

转载闭包(未写完整)

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，在函数外部自然无法读取函数内的局部变量。这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！二、如何从外部读取局部变量？出于种种原

2017-04-23 22:12:19 164

原创 js实现选项卡切换

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>选项卡切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } bod

2017-04-23 01:14:06 1192

原创 js实现全选全不选反选

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>全选全不选反选</title> <style type="text/css"> *{ padding: 0; margin: 0; } bo

2017-04-22 22:58:17 355

原创 js实现倒计时（天时分秒）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div

2017-04-22 20:10:30 2505

原创 js实现在文本框输入图片的路径，在下方动态显示图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>在文本框输入图片的路径，在下方动态显示图片</title> <style> *{ padding: 0; margin: 0; } body{

2017-04-22 16:15:44 4142 1

原创 js实现往表格动态添加学生的学号、姓名、语数英的考试成绩和总分(总分不是填写)，实现行与行之的颜色相间，高光的效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>学生成绩表</title> <style> *{ padding: 0; margin: 0; } body{ fo

2017-04-22 16:13:51 4318

原创自定义getElementsbyClassName(封装)

javascript/** * 这是一个自定义的js工具库 * @author ming.eh.tang * @date 2017/4/19 * @version 0.0.1 *//** * 实现标签对象的样式属性设置或获取 * @param object 需要使用的标签对象(标签对象指的是使用类似document.getElementById得到的结果) *

2017-04-21 18:52:02 438

原创 DOM对象

DOM就是DocumentObjectModel，文档对象模型。赋予JS操作节点的能力。当网页加载时，浏览器会创建页面的DOM。  查找HTML元素 1. document.getElementById(‘id’)，不建议使用id，后端开发人员使用 2. document.getElementsByTagName(‘tag’); 3. document.getElementsByCla

2017-04-21 18:26:55 366

原创 string字符串常用方法

定义字符串：var s1 = 'string';var s2 = "string";var s3 = new String('string');常用方法：  获取给定位置的字符string.charAt//(位置)string[10]; 拼接两个字符串，原字符串不会做改变，产生一个新的字符串var string3 = string1.concat(string2);var st

2017-04-21 18:15:37 279

原创 js实现按钮控制图片向左、向右、向上、向下无缝轮播

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>向左、向右、向上、向下无缝滚动</title> <style type="text/css"> *{ padding: 0; marg

2017-04-21 17:24:23 2554

原创 js中return的用法

一、返回控制与函数结果语法：return 表达式；在函数语句结束时执行，并返回表达式的值作为函数的结果；比如：function foo(obj){var resultObj=obj//可对传入参数进行处理.return resultObj;}在这个列子中：obj 代表的是一个对象.所谓对象就是所他可以包纳万物.无论是Number bool 还是String 或这是其他实列都包含在

2017-04-20 23:45:16 9977 3

原创 js实现图片无缝向左轮播

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title><style> *{margin: 0;padding: 0;} ul, li{list-style: none;} .js-mask{width: 198px;height: 132px;borde

2017-04-20 22:21:39 3221 1

原创 Date日期的常用方法

计算机的时间是以1970年1月1日0时0分0秒(英国格林尼治天文台)开始创建日期：var date = new Date(); //获取当前的时间<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>日期的使用</title> </head> <body> </bod

2017-04-20 17:47:01 517

原创 array数组的使用

定义： var arr = [1,3,5,7,9]; var arr = new Array(1,3,5,7,9); 使用上没有差别，[]性能会高一点点一个属性，length 设置或获取数据的长度，如果设置的新长度小于原有长度，多余的数据会丢失。使用原则：数组中只保存同一类型的数据数组的常用方法// 在数组最后添加新的数据，push()*****// 把数组最后一个数据删除并返回删

2017-04-20 17:36:12 505

原创浏览器(chrome，FF)的debug模式

按F12打开开发者工具留意Wath和Local里面的变量的内容是否和我们预期的一致，如果不致表示前面的代码某个地方出现了错误，我们需要在前面的代码重新设置断点找出出问题的地方并把问题解决。

2017-04-20 17:22:57 2002

原创 js实现按钮改变背景颜色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> *{ margin: 0; padding: 0; } ul{

2017-04-20 10:51:11 12753

原创获取非行间样式（封装）

如果我们没有设置过width/height…，我们通过style.width是不能获取到具体的数据非IE浏览器可以通过”getComputedStyle(需要获取数据的标签对象, false).属性”获取 IE浏览器使用，”标签对象.currentStyle.属性” **复合样式是不能直接获取，类似于background不能直接获取颜色，需要写为backgroundColorargument

2017-04-20 09:12:58 543

原创 JSON数据格式

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 XML数据格式 <person id="1234567890"> <name>李达康</name> <job>省委书记</job> </person>JSON数据 {

2017-04-20 09:02:28 508

原创 js实现简单的动画（游动的鱼）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; }

2017-04-20 00:14:43 5220

原创 js实现页面动态时间，滚动效果（年月日，小时、分钟、秒，星期，毫秒）

年月日放在一个div里面；小时、分钟、秒放在一个div里面；星期放在一个div里面；毫秒放在一个div里面。因为它们的时间设置不同或img类不同html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js制作一个动态页面时间，滚动效果</title> <style type

2017-04-19 23:03:08 6215 1

原创 js实现简单的动画（4个按钮控制图片上下左右移动）

第一种写法，比较原始，没有精简的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小圆上下左右移动</title> <style> *{ margin: 0; padding: 0; }

2017-04-19 18:11:33 10666

原创 JS输出100-1000的水仙花束

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> var n,i,j,m,s; for (n=100;n<=999;n++){//

2017-04-19 10:03:41 2031

原创 js定时器

定时执行，每隔一段时间执行一次 setInterval(fn, 间隔时间单位毫秒) setInterval(‘fn()’, 间隔) setInterval(function(){}, 间隔)延时执行，在指定的时间执行一次 setTimeout(fn, 间隔); setTimeout(‘fn()’, 间隔); setTimeout(function(){},间隔);定时器的关闭 cl

2017-04-18 18:51:11 395

原创 JavaScript选择DOM的方式

通过ID选取元素(getElementById) 1.1 使用方法：document.getElementById(‘domid’)，domid就需要选取元素的id属性值 1.2 兼容性：低于IE8版本的IE浏览器getElementById的方法是不区分元素的大小写，并且会返回匹配id属性的元素通过name选择元素(getElementsByName) 2.1 使用方式，document.

2017-04-18 18:47:57 367

原创 js 实现简单的动画效果（小圆移动）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css" media="screen"> *{ padding: 0; margin: 0;

2017-04-18 18:36:40 3419 1

原创 js实现全选或全不选，类似email的效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div><input type="checkbox" id="checkAll"/>全选/全不选</div> <ul>

2017-04-18 18:31:47 227

原创 hover实现手风琴动画和bug的解决

每个图片放在li里面；然后左浮动。给li宽度，img超出li的隐藏；li的宽度不等，但和等于ul的宽度;其中一个li的宽度等于图片的，li超出ul的隐藏；当ul:hover,li的宽度都为128px；当li:hover,li的宽度为图片的宽度；bug文章后面展示。<!DOCTYPE html><html> <head> <meta charset="utf-8" /

2017-04-18 12:18:28 1060

原创 for循环嵌套输出数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>for循环嵌套输出数据</title></head><body></body><script> var persons=[['小白','女','32','演员'],['小王','男','32','工程师']]; docume

2017-04-18 10:45:35 1231

原创 for循环嵌套制作九九乘法表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>for循环嵌套制作九九乘法表</title></head><body></body><script> for(var i=1;i<10;i++){ for(var j=1;j<10;j++){

2017-04-18 10:39:24 3570

原创 target实现手风琴效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>手风琴</title> <style type="text/css"> *{ margin: 0; padding: 0;

2017-04-15 18:09:21 573

原创小圆围绕大圆360度旋转的2种方法

第一种：覆盖法 1. ul包含7个li，每个li包含图片和含小圆的span； 2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li； 3. span（小圆）由一个div包住，div覆盖（定位）到li上面去，div的大小和li大小一样; 4. 给每个li和span定位； 5. div旋转360度，小圆就旋转360度；

2017-04-15 17:52:54 6787

原创 JS的三种输出方式

1.window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用。<script type="text/javascript"> /* * window.alert() 把小括号里的内容，以弹窗的方式显示出来 * window是BOM对象，指的是整个浏览器，可以省略不写 * '我是李康达，我为GDP代言'

2017-04-15 17:06:18 62368 2

空空如也

空空如也