Javascript
关注
分享
扫一扫
曲奇小姐
这个作者很懒，什么都没留下…
展开
-
JS中操作HTML页面的两种方法
在大部分情况下，我们都习惯用第一种方法：这种方法在点号后面是style的属性值的时候，都不会出错，也就是说，这种形式的操作是默认点号后面是样式的一种属性那么，当点号后面不是样式的一种属性，而是函数传参进来的一个变量怎么办，比如一下这种操作：在这里这么写是无法得到正确的结果的，因为浏览器还是会把name看作是样式的属性之一，但是这并不是样式的属性，所以导致修改样式不成功，这个时候就要用到第二种方法了...原创 2018-06-02 09:07:20 · 4311 阅读 · 0 评论 -
JS小练习之实现点击显示／隐藏
这段代码实现的是：点击一个按钮显示一段文字，然后再点击一次，文字消失；这个可以联想到一些网站导航栏里，点击一个按钮出现一个下拉框，里面有很多链接那种效果这里主要需要注意的一点是：在用JS改变HTML页面中的一些样式时，html里的代码怎么写，js里面的代码就怎么写但是有一个例外，那就是，如果你想用JS动态的为HTML页面的某个元素增加一个class类，你需要这样写：而不是：obj.class="a...原创 2018-06-01 22:53:48 · 3107 阅读 · 0 评论 -
JS小练习之鼠标移入移出实现的一些效果
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>鼠标移入移出显示效果</title> <style> #di原创 2018-06-01 15:33:54 · 4708 阅读 · 0 评论 -
Ajax的一次小练习从服务器端读取静态文件以及阻止缓存
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>用Ajax读取一个服务器上的文件</title> <style>&a原创 2018-06-15 09:55:10 · 256 阅读 · 0 评论 -
JS键盘事件之ctrl+enter来提交留言
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>键盘事件之ctrl+回车提交留言</title> <style>&a原创 2018-06-15 09:05:14 · 1788 阅读 · 0 评论 -
JS学习笔记之window对象：alert、confirm和prompt
今天开始认真的学习JS的基础知识，由于之前也断断续续的学过一些，所以这一次也算是复习和巩固，很多东西再看一遍还是会有不一样的感受和更深的理解。在这里就写一写自己觉得重要或者记得不是很熟练的笔记吧。...原创 2018-05-19 11:57:55 · 2008 阅读 · 0 评论 -
JS学习笔记之window对象：setTimeout、setInterval和clearInterval
一，window.setTimeout() - 暂停指定的毫秒数后执行指定的代码 在下面的截图中可以看到，该方法可以带两个参数，分别是要执行的函数，以及需要暂停的时间；这里的函数可以是一个匿名函数，包含若干操作，在等待一定的时间之后就会执行这个函数二，window.setInterval() - 间隔指定的毫秒数不停地执行指定的代码 每次你设置了一个时间间隔的计时器之后，这个对象就...原创 2018-05-19 14:31:25 · 527 阅读 · 0 评论 -
JS学习笔记之关于字符串的一些操作方法
获得字符串的某一个字符 charAt(index):返回一个字符串某一个索引的字符(如果对字符串的某个索引赋值，不会有错误，也没有效果)var s="hello world";console.log(s.charAt(1)); //输出字符'e'直接用下标索引(如果对字符串的某个索引赋值，不会有错误，也没有效果)var s="hello world";console.log(s[1]); ...原创 2018-05-19 15:25:10 · 117 阅读 · 0 评论 -
《Javascript_DOM编程艺术》学习笔记（一）
今天在知乎上刷到一篇文章，如何循序渐进的学习JS，觉得作者讲的不错，对于JS学习，我打算一边在网上找一些实战的项目练习，一边看书。作者推荐的第一本书就是《Javascript_DOM编程艺术》，现在就一边看一边做些笔记吧。一，DOM---Document Object Model 文档对象模型 。它根据你写的网页文档创建一个文档对象。二，JS语言里的对象分为三种：用户定义对象：由程序员自行...原创 2018-05-19 23:25:26 · 194 阅读 · 0 评论 -
JS小练习之实现全选、不选、反选
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>全选、不选、反选</title> <style> &原创 2018-06-02 16:05:40 · 197 阅读 · 0 评论 -
JS小练习之实现无缝滚动
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>定时器</title> <style> /* #div1{原创 2018-06-09 19:54:23 · 173 阅读 · 0 评论 -
leetcode(5)之Roman to Integer 将罗马数字转换成数字
题目描述 题目要点1，相同的数字连写，表示把这些数字加起来的效果2，如果左边的数字比右边的数字小，那么得到的就是左边的数字减去右边的数字的结果3，如果左边的数字比右边的数字大，那么得到的就是两者相加的结果解法一思路：遍历整个罗马字符串，如果前一个字符表示的数值比后一个字符表示的数值小，那么就在结果变量中减去小的这个字符代表的数值，否者就加上这个字符代表的数值代码：...原创 2018-09-05 21:08:40 · 182 阅读 · 0 评论 -
javascript中清空数组的几种方法
方法一：lengthvar arr=[1,2,3,4];arr.length=0;console.log(arr);//Array(0),输出为空数组方法二：arr=[ ];var arr=[1,2,3,4];arr=[];console.log(arr);//[],输出为空数组方法三：splicevar arr=[1,2,3,4];arr.splice(0,a...原创 2018-09-01 09:11:28 · 273 阅读 · 0 评论 -
一些被忽略的小知识之Nan、undefined、null
要不是因为去面试，我才发现自己原来有那么的小知识点不知道，还有一些原理理解的不透彻，想来面试真的是检验自己学的是否扎实的不二途径，所以，多多总结才会变得更稳呐。Nan1，Nan表示not number，中文解释是“非数字的特殊值”；2，Nan的数据类型是number(这是事实，我没有说错)；typeof NaN; //numberconsole.log(NaN =...原创 2018-08-31 21:29:28 · 1191 阅读 · 0 评论 -
JS运动之多物体运动淡入淡出
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JS运动之多物体运动淡入淡出:要点：当涉及多物体的运动时，最好不要有公共使用的变量，避免造成混乱</title&原创 2018-07-15 15:21:26 · 227 阅读 · 0 评论 -
JS运动之多个物体同时运动，如何不相互干扰
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JS运动之多个物体同时运动</title> <style>原创 2018-07-15 10:10:28 · 841 阅读 · 0 评论 -
仿Flash图片轮播
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>实现图片轮换播放</title> <link rel="stylesh原创 2018-07-19 16:31:47 · 412 阅读 · 0 评论 -
JS运动框架中关于offsetWidth的一个小bug
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JS运动框架中关于offsetWidth的一个小bug</title> <styl原创 2018-07-16 15:51:31 · 209 阅读 · 0 评论 -
JS运动址多物体任意值运动框架
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JS运动之多物体任意值运动框架，可以改变任意属性（包括透明度）</title> <原创 2018-07-16 14:23:13 · 189 阅读 · 0 评论 -
JS小练习之childNodes，children，parentNode，offsetparent，firstChild与firstElementChild的用法
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>DOM基础</title> <style></styl原创 2018-06-11 10:10:02 · 342 阅读 · 0 评论 -
《Javascript_DOM编程艺术》学习笔记（二）
今天主要以一个小例子来记录学到的知识点。项目名称：我的美术馆项目简介：页面中列出一系列图片的链接，点击链接，会在链接组的下面切换到对应的图片，并且在图片的上方更改对应图片的简介信息效果展示：点击第一个链接后：下面讲讲具体实现代码：在HTML页面中，用到的一个很重要的JS知识就是：onclick事件，该事件会在元素被鼠标点击时发生，触发JS事件这条语句表示当onclick事件发生时，会调用showP...原创 2018-05-20 15:26:24 · 143 阅读 · 0 评论 -
JS学习笔记之写一个计时器
关于这个计时器，主要是用到了JS本身地带的一些方法，熟悉一下就好；这个语句就是将str的内容插入到mytime的内容里；innerHTML在JS中具有双向功能，获取对象的内容或者向对象插入内容...原创 2018-05-27 10:30:48 · 855 阅读 · 0 评论 -
JS小练习之点击随机切换图片
这里主要用到的新增知识点是：Math对象方法。Math对象有许多方法，在这里就只谈一谈常用的几个方法：Math.abs(x); //返回x的绝对值Math.random(); //返回0-1之间的随机数Math.floor(x); //对x进行下舍入，比如x=1.6,会返回x=1Math.round(x); //把x四舍五入为最接近的整数，比如x=1.6,会返回x=2Math.max(x...原创 2018-05-29 16:25:24 · 1883 阅读 · 0 评论 -
JS运动——缓冲运动
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>缓冲运动——逐渐变满，直到最后停下</title> <style>原创 2018-06-13 19:58:18 · 145 阅读 · 0 评论 -
JS小练习之实现网站的侧边栏分享操作
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>运动框架</title> <style> /* #div1{原创 2018-06-13 11:46:26 · 519 阅读 · 1 评论 -
JS小练习之实现简易日历
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>简易日历</title> <style> .wrapper{原创 2018-06-05 22:08:46 · 335 阅读 · 0 评论 -
JS小练习得到的一些散碎小笔记
window.onload();这个方法就是你可以把JS代码放在这个方法中，然后就会等待页面加载完成之后再来执行JS代码，它比较适合：当你把JS代码写在最前面，并且要对下面的页面的做修改时，如果没有使用这个函数，程序就会报错关于写前端时的一个小建议：行为（js）、样式(css)、结构(html)相分离，也就是说最好做到不添加行间样式和行间JS代码，这样会使得代码更为健壮这个方法与之前常用的getE...原创 2018-06-05 15:41:25 · 135 阅读 · 0 评论 -
JS小练习之实现表格排序
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>实现表格排序</title> <style> #ul1{原创 2018-06-12 11:16:17 · 196 阅读 · 0 评论 -
表格练习——DOM关于表格的高级操作、隔行变色、选中变色、添加／删除表格的一行,查找表格中的内容（模糊搜索，多关键字搜索）
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>表格-隔行变色，鼠标移入变色</title> <style>原创 2018-06-11 22:45:09 · 620 阅读 · 0 评论 -
DOM基础—3 使用文档碎片减少页面渲染完成时间
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>文档碎片</title> <style></style原创 2018-06-11 19:46:20 · 238 阅读 · 0 评论 -
DOM基础-2 createElement(),appendChild(),insertBefore()，removeChild()
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>DOM基础-2</title> <style></st原创 2018-06-11 16:52:04 · 205 阅读 · 0 评论 -
DOM元素灵活获取元素
一，JS有获取元素的方法：getElementById(); 这个只适合那种只要获取一两个元素的操作，一旦要批量操作很多元素的时候就显得很麻烦了getElementsByTagName();这个只适合那种要获取一大批元素操作权的地方，但是也很烦，太不精确了用className选择元素：这样你就可以根据自己的需要来选中你想要的元素，这个简直太方便啦！下面举个例子看看怎么使用className://将...原创 2018-06-11 15:44:44 · 156 阅读 · 0 评论 -
JS运动之实现图片的淡入淡出
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>图片淡入淡出</title> <style> #div1{原创 2018-06-13 20:32:04 · 289 阅读 · 0 评论 -
JS运动之实现页面侧边的居中浮动框
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>实现右侧的浮动栏</title> <style> #div1原创 2018-06-13 22:02:35 · 694 阅读 · 0 评论 -
JS小练习之实现数组排序
在实现数组排序这里主要用到了sort()函数，但是sort(sortby),这里的参数可选，如果不带参数，那么默认的排序规则是字符的编码顺序，（这个很少用吧，排出来的东西没什么使用价值）；然后这里的参数只能是一个函数，就是你自己写一个比较函数；下面是自己写一个比较函数的例子：...原创 2018-05-30 09:58:41 · 313 阅读 · 0 评论 -
JS小练习之实现一个计时器（开始，暂停，重置）
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>一个计时器</title> <style> #mytim原创 2018-05-31 08:42:01 · 25239 阅读 · 9 评论 -
JS小练习之实现倒计时结束后跳转页面的效果
这里用到的一个主要的知识点是：window的location对象；还遇到一个编程上的小曲折：num=--i和num=i-1其实在这个程序中得到的结果是完全不一样的，num=--i,是将i-1之后的值赋给了num并且i的值也变成了i-1,而num=i-1,i的值并没有i-1;就相当于一下两个等式是相等的：...原创 2018-06-01 09:13:42 · 1744 阅读 · 0 评论 -
JS小练习之实现一个酷炫时钟
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>超酷炫时钟</title> <style> .wrapper原创 2018-06-07 18:56:12 · 1240 阅读 · 0 评论 -
JS小练习之实现延时提示框
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>实现延时提示框</title> <style> div{fl原创 2018-06-07 22:51:08 · 261 阅读 · 0 评论 -
JS小练习之鼠标事件——让物体跟随鼠标移动
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>鼠标事件</title> <style> #div1{原创 2018-06-14 12:27:25 · 3663 阅读 · 1 评论