前端
野生杂学家阿博
发现问题,解决问题,总结反思。
展开
-
前端笔记48——实现小说网页中字体大小如意变
前言相信很多小伙伴都有阅读的习惯,那么你们是否有留意到字体变大或变小功能呢?下面分享一下这个功能的实现。让网页中的字体增大变小功能说明:点击+号,id为p1的p元素中的字体变大2个像素 点击-号,id为p1的p元素中的字体变小3个像素。实现代码<!DOCTYPE html><html> <head> <meta charset="UTF...原创 2019-01-01 16:13:06 · 317 阅读 · 0 评论 -
前端笔记65——查找HTML元素的其他方法
前言在前面的《前端笔记41——JavaScript查找HTML元素》中,分享了通过id来查找HTML元素的方法。查找HTML元素的方法通过id来获取元素;通过标签名称来获取元素;通过类名称来获取元素。代码实例实现上面说的三种方法查找元素,还做了一个批量添加功能。小伙伴们可以复制到编译器上面看运行效果。<!DOCTYPE html><html> <...原创 2019-01-19 13:32:20 · 520 阅读 · 0 评论 -
前端笔记57——for循环
前言在编程开发当中,我们肯定会用到遍历。一般来说,我们是使用for循环来进行遍历,那么JavaScript中的for循环是怎么样的呢?下面分享我学习到的JavaScript的for循环。for循环for循环是让某段代码重复执行。直观的应用,音乐的单曲循环。语句格式for(初始化表达式;条件表达式;条件改变){ 循环体:需要被循环的代码}例子1:利用JavaScript代码输出...原创 2019-01-09 00:57:55 · 2621 阅读 · 0 评论 -
前端笔记58——while循环详解
前言前面介绍了JavaScript的for循环,这里分享一下我学到的while循环。while循环while 循环的目的是为了反复执行语句或代码块。只要指定条件为 true,循环就可以一直执行代码块。语句格式while(条件){ 循环体}举个栗子:在网页中输出1-3<!DOCTYPE html><html> <head> <me...原创 2019-01-09 01:06:33 · 964 阅读 · 0 评论 -
前端笔记59——do...while循环
前言前面的博客有分享到while循环,这里分享一下while循环的变种do...while循环。do…while循环do...while 循环是 while循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。语句格式do{ 循环体}while(条件表达式)举个栗子:在网页中输出0-5<!DOCTYPE html>&l...原创 2019-01-09 01:15:16 · 328 阅读 · 0 评论 -
前端笔记60——break和continue
前言我们在前面的有关于条件判断和循环的博客中有提到break关键字退出循环,还有另一个关键字continue也是退出循环的,下面来分享一下他们的使用。break关键字break关键字表示跳出当前循环。举例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...原创 2019-01-09 01:34:06 · 750 阅读 · 0 评论 -
前端笔记61——循环嵌套
前言前面有学到for循环、while循环、do…while循环,这里分享一下在开发中会遇到的循环嵌套循环,主要以for循环为例子。例子1在网页中,打印上面出现的1-5形式。代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></tit..原创 2019-01-09 01:56:20 · 422 阅读 · 0 评论 -
前端笔记66——鼠标事件
前言在平时的PC端操作中,我们肯定会发现鼠标双击、鼠标移动等等事件。那么JavaScript关于鼠标事件是怎么样呢?下面就来分享。鼠标事件简单理解,和鼠标有关的事件。事件名称和事件的触发场景事件名称 事件的触发场景onmousedown 当鼠标按下的时候触发onmouseup 当鼠标抬起的时候触发onmous...原创 2019-01-28 22:10:42 · 2662 阅读 · 0 评论 -
前端笔记67——键盘事件
前言在上一篇博客中有分享到鼠标有关的事件。PC端操作中有鼠标当然就少不了键盘有关的事件,下面分享JavaScript关于键盘的事件操作。键盘事件简单理解,和键盘有关的事件。事件名称和触发场景事件名称 事件的触发场景onkeydown 当键盘按下的时候触发onkeyup 当键盘抬起的时候触发举个例子...原创 2019-01-28 22:16:15 · 414 阅读 · 0 评论 -
前端笔记68——表单事件
前言原创 2019-01-28 22:51:14 · 324 阅读 · 0 评论 -
前端笔记64——二维数组
前言在上篇博客《前端笔记63——数组》中,我分享到了一维数组的学习心得,下面分享一下二维数组的学习心得。二维数组的定义<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &a原创 2019-01-19 13:22:05 · 1198 阅读 · 0 评论 -
前端笔记63——数组
数组数组是一组数据,有序,有索引的数据集合。作用可以批量的存储数据。生活实例:学生的成绩单,包含学生每一科成绩。数组的元素在这个集合中的每个项目都是数组的元素。数组的索引给数组的元素一个具体的序号,从0开始到n。数组的长度数组中元素有多少个。创建数组1.创建空数组,下面有两种写法效果一致var arr = new Array();var arr = [] 2.创建具...原创 2019-01-19 13:15:33 · 227 阅读 · 0 评论 -
前端笔记62——函数
前言在前面的《前端笔记42——JavaScript中函数》中提到函数,这篇博客会分享我学习JavaScript中函数的详细内容。函数的定义函数就是一段具有一定功能的代码块。函数的声明使用function关键字进行声明,函数的结构:function 函数名(){ 函数体 --->有很多的语句组成 }函数的调用函数调用是使用函数名称去调用,需要注意的是:函数名不加()只...原创 2019-01-19 13:05:18 · 186 阅读 · 0 评论 -
前端笔记49——数据类型
数据类型的分类Number–>数字类型String–>字符串类型Boolean–>布尔类型Null -->空Undefined -->未定义Object --> 对象typeof 操作符我们可以通过typeof 操作符指导某个变量的数据类型。举例<!DOCTYPE html><html> <head>...原创 2019-01-01 16:38:22 · 128 阅读 · 0 评论 -
前端笔记50——强制类型转换之转换成数字类型
前言在前面的《前端笔记49——数据类型》中我们有提到JavaScript的数据类型。那么下面我们介绍一下JavaScript数据类型强制转换成数字类型。代码示例下面的代码中,主要实现将一个全部是数字的字符串转成数字类型。有兴趣的小伙伴可以把代码复制到编译器运行。<!DOCTYPE html><html> <head> <meta chars...原创 2019-01-01 16:48:46 · 2396 阅读 · 0 评论 -
前端笔记51——强制类型转换成字符串和布尔类型
前言前面的《前端笔记50——强制类型转换之转换成数字类型》博文中提到数据类型强制转换成数字类型,那么这篇博客分享的是将数据类型强制转换成字符串和布尔类型。举个例子下面这个例子中,利用代码跟大家说明怎么将数据类型转换成字符串和布尔类型。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="U原创 2019-01-01 17:55:03 · 1366 阅读 · 3 评论 -
前端笔记52——自动类型转换
前言在前面的《前端笔记50——强制类型转换之转换成数字类型》和《前端笔记51———强制类型转换成字符串和布尔类型》两篇博文中分享了数据类型的强制转换,下面来分享一下数据类型的自动转换。举例说明&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&原创 2019-01-01 18:28:27 · 185 阅读 · 0 评论 -
前端笔记53——Boolean的应用Demo
前言我们有了解到数据类型中Boolean类型,那么我们生活中的开关装置就是Boolean的应用,我们写一个开关类型的Demo。Boolean的应用Demo我们通过JavaScript代码去控制我们div显示或者隐藏。希望对学习前端开发的小伙伴有帮助。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset=&am原创 2019-01-02 22:56:51 · 140 阅读 · 0 评论 -
前端笔记54——运算符
运算符分类算术运算符关系运算符逻辑运算符条件运算符赋值运算符算术运算符算术运算符用于执行变量与/或值之间的算术运算。加减乘除就不用说了,后面的%(取余)、++(累加)、–(递减)需要单独举个例子。%(取余)的例子在输入框中输入一个3位数,点击按钮后,在id为result的div中输出这个数的个位。<!DOCTYPE html><html> &...原创 2019-01-02 22:59:44 · 196 阅读 · 2 评论 -
前端笔记55——if语句
条件判断通常写代码的时候,我们需要根据不同的条件执行不同的代码块。那么if语句是一个不错的选择。if语句只有当指定条件为 true 时,该语句才会执行代码。语法一if (条件){ 当条件为 true 时执行的代码}举个例子: if(num >= 60){ alert("及格") }语法二请使用 if…else 语句在条件为 true 时执行代码,在...原创 2019-01-02 23:00:52 · 2470 阅读 · 1 评论 -
前端笔记69——窗口事件
前言前面分享了鼠标事件、键盘事件、表单事件,再分享一个窗口事件。窗口英文是windows,简单理解窗口事件是windows有关的事件。事件名称和触发场景事件名称 触发场景onload 当对象加载完成以后触发onresize 当窗口改变的时候触发 onload事件例子<!DOCTYPE html><html&...原创 2019-01-28 23:15:35 · 401 阅读 · 0 评论 -
前端笔记70——仿百度登录窗口拖拽效果
前言在我们使用百度相关的功能网页的时候,我们要去登录账号。但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢?下面分享仿百度登录拖拽效果的源码代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <st原创 2019-01-29 18:16:37 · 340 阅读 · 0 评论 -
前端笔记71——利用键盘码来控制div移动
前言在生活中肯定有玩过贪吃蛇的游戏,那么要怎么样用键盘码来实现div的移动呢?下面就分享一个Demo。利用键盘码来控制div移动源码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style ty原创 2019-01-29 18:23:50 · 231 阅读 · 0 评论 -
前端笔记84——setTimeout
setTimeout的简介setTimeout是一个函数,功能:等待多少时间后执行一段代码,类似于生活中的定时炸弹。setTimeout实现一个定时炸弹<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head&...原创 2019-06-21 23:46:47 · 395 阅读 · 0 评论 -
前端笔记85——递归函数
递归函数简单来说,递归函数就是自己调用自己,然后在一定条件下会停止或者跳转递归。简单的递归<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script ...原创 2019-06-21 23:50:13 · 453 阅读 · 0 评论 -
前端笔记86——发送验证码的效果
前言在日常的开发当中,我们肯定会遇到发送验证码的需求。最可能出现的页面就是登录注册页面,下面分享一下前端利用Js代码去实现发送验证码效果,有兴趣的小伙伴可以复制编译器当中运行查看效果。JS实现发送验证码的效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...原创 2019-06-21 23:55:25 · 864 阅读 · 2 评论 -
前端笔记87——clearTimeout
clearTimeout简介clearTimeout是一个函数,功能是清除定时器。开启一个新的定时器必须清除之前的定时器。clearTimeout实现一个定时器的管理<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <...原创 2019-06-21 23:59:53 · 2774 阅读 · 0 评论 -
前端笔记88——自定义属性
前言在日常的开发当中,我们会发现系统定义的属性没有办法满足我们的开发,所以我们需要自己去定义属性。下面分享一个定义属性的实例自定义属性实现的实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head>...原创 2019-06-22 00:03:59 · 667 阅读 · 0 评论 -
前端笔记89——tab选项卡以及实现自动播放功能
前言在日常的开发当中,我们遇到点击不同的Tab出现不同的界面,但是我们要怎么去实现Tab呢?下面分享一下Tab有关的代码实例,有兴趣的小伙伴可以复制到编译器当中运行查看效果。实现Tab选项卡以及实现自动播放功能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...原创 2019-06-22 00:12:07 · 445 阅读 · 0 评论 -
前端笔记90——获取元素样式
前言很多时间我们需要利用代码获取当前元素样式,然后进行修改。但是我们需要怎么利用JS代码获取呢?下面就分享有关的实例啦!有兴趣的小伙伴可以复制到编译当中,运行查看效果。获取元素样式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&g...原创 2019-06-22 00:16:51 · 195 阅读 · 0 评论 -
前端笔记91——简单的匀速运动以及匀速运动函数封装
前言在读书的时候,学物理的时候有提到匀速运动。Js代码也可以实现匀速运动,你信不信?下面就来一个简单的匀速运动的代码实例。匀速运动实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="t...原创 2019-06-22 00:30:48 · 579 阅读 · 0 评论 -
前端笔记92——摆动效果以及摆动函数的封装
前言在很多登录页面的框中,输入了错误的账户或者密码的时候,会出现摆动现象。那么这种摆动现象是怎么实现的呢?下面我来分享一下摆动效果的实例代码以及相关代码的封装。摆动效果的实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...原创 2019-06-22 00:43:25 · 709 阅读 · 0 评论 -
前端笔记83——自动书写代码效果
前言不知道小伙伴有没有想过程序自动写代码是怎么样的呢?我觉得挺有趣的,因为我是试过让程序自己写代码。开发中可能会遇到自动写一段文字的需求,那么自动写代码的JS程序就可以实现这种需求啦!有兴趣的小伙伴们可以复制下面的代码到编译器当中,运行查看效果。自动写代码效果<!DOCTYPE html><html> <head> <meta charse...原创 2019-06-21 23:36:55 · 306 阅读 · 0 评论 -
前端笔记82——随机抽奖的JS代码
前言在前端的开发当中,我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢?下面就来分享随机抽奖的JS代码,有需要的小伙伴可以复制到编译器当中运行查看效果。随机抽奖的JS代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...原创 2019-06-21 23:31:18 · 3074 阅读 · 0 评论 -
前端笔记81——背景切换
前言在日常的开发当中,我们遇到产品当中的需要切换图片或者背景的需求,就是商城当中的Banner是最长遇到的。那么前端是怎么样去实现的呢?下面就来分享一下,我实现的代码。有需要的小伙伴可以复制到编译器中运行。JS代码实现背景切换<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...原创 2019-06-21 23:24:36 · 246 阅读 · 0 评论 -
前端笔记72——事件冒泡机制
概述事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。注意:这里传递的仅仅是事件,并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。简单的例子<!DOCTYPE html><html> <head> <meta charset="U...原创 2019-04-30 00:39:59 · 677 阅读 · 0 评论 -
前端笔记73——JS中的对象
前言JavaScript中也有对象这个说法,引用“万物皆对象”的观念。下面就分享一下怎么去定义对象。定义一个对象<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...原创 2019-04-30 00:45:13 · 86 阅读 · 0 评论 -
前端笔记74——JS中数组相关的方法
前言每个开发语言都离不开数组的存在,JS中的数组观念与其他开发语言的观念一样。一个例子说明数组相关的方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <...原创 2019-04-30 00:48:10 · 94 阅读 · 0 评论 -
前端笔记75——JS中字符串相关的方法
JS中字符串相关的方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var st...原创 2019-04-30 00:50:22 · 104 阅读 · 0 评论 -
前端笔记76——JS字符串方法的练习
JS字符串方法的练习需求:假设上传商品图片的应用场景,需要判断上传文件后缀是图片类型。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class=...原创 2019-04-30 00:53:07 · 219 阅读 · 0 评论