
前端
文章平均质量分 52
往玉
这个作者很懒,什么都没留下…
展开
-
javascript回到顶部
如图: 数字从1到100,滚动后点击章鱼哥便可以回到顶部。 HTML内容不多只有一个a标签内容有一个图片和100个h1标签,但要看清楚是给它设置好了id的,当然不设置id也行但有时候对小白不太友好。 为了使点击图片更加贴合整个页面所以需要给图片设置样式,比如宽度、高度为了让图片固定在右下角所以需要给图片设置固定定位并调整其位置。 最后便是javascript部分,当页面发生滚动时,首先获取到滚动的高,然后返回获取...原创 2022-05-08 15:57:59 · 433 阅读 · 0 评论 -
闭包切换图片
如图: 此案例HTML代码只有一个div和三个span标签还有三个img标签,整体代码量不多,但如果粗心那也会很苦恼的。 同时为了让整个案例看起来更加整洁美观,需要给span标签和img标签设置css样式,还要给span标签设置鼠标移入时的伪类,最重要的是要给img标签的display属性的属性值为none,这样才能使图片在未点击时不显示。 接下来就是本篇文章的重点——JS部分 页面在加...原创 2022-04-28 10:14:29 · 98 阅读 · 0 评论 -
复选框的全选、全不选和反选
如图: 整个页面内容非常少只有五个复选框和三个按钮,如果嫌复选框少的话可以自己手动增加。 HTML内容如下图,但要注意一点就是输入框的tyep属性的属性值一定要是checkbox,因为checkbox就是复选框的意思,在HTML里也是复选框,所以tyep的值一定要是checkbox,要不然它就不是一个复选框。 接下来就是本篇文章的重点,JavaScript部分。 按照惯例首先要获取到所有...原创 2022-04-19 10:55:12 · 4270 阅读 · 1 评论 -
JS移动显示框
效果如下图: 鼠标未移入左边的框时,右边的框隐藏;鼠标移入左边的框时,右边的框显示并且鼠标在左边的框移动时,右边的框里的内容也会移动。 html部分只有三个div,非常的少,但有一句老话所谓浓缩就是精华,三个div就可以写出这个案例。 首先获取到这三个div通过id获取就行了。 接着计算大图和小图的距离比例。 ...原创 2022-04-10 11:29:29 · 472 阅读 · 0 评论 -
JS正则表达式判断邮箱
什么是正则表达式?正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符,或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。什么是test()方法?Test()方法是一个正则表达式方法。Test()方法用于检测原创 2022-03-28 19:34:25 · 4487 阅读 · 0 评论 -
JS_DOM文档对象模型(节点篇)
想要知道什么是节点,首先要知道什么是DOM,DOM全称Document Object Model文档对象模型,JS中通过DOM来对HTML文档进行操作。文档对象模型可以拆开三份进行理解,文档表示的就是整个HTML网页文档、对象表示的是将网页中的每一个部分都转换为了一个对象、模型表示的是使用模型来表示对象之间的关系。在文档对象模型中最重要的就是“节点”,节点(Node)是构成网页的最基本的组成部分也是构成HTML文档最基本的单元。在网页中的每一个部分都可以称为是一个节点,比如:html标签、属原创 2022-03-20 08:20:55 · 346 阅读 · 0 评论 -
时钟小案例
时钟案例需要了解日期对象和运用日期对象,但不会太复杂,跟着小编一步一步便可以完成。(如果有不了解日期对象的小伙伴可以看一下小编之前的文章)如图:首先创建一个新的HTML文档,然后写入三个span标签,这三个span标签每一个设置了id,虽然三个id都不同,但是它们的内容是相同的都是00,因为做的是时钟案例需要在第一个span标签和第二个span标签的结束标签后加上冒号,但要注意这三个span标签是在一个div里的,而且这个div也要加上类名,这是为了方...原创 2022-03-08 09:43:36 · 309 阅读 · 0 评论 -
留言板小案例
留言板案例,如图: 首先新建一个html文件,写好我们需要的内容。一个文本域,但是这个文本域里面没有内容,然后需要提前给它设置好id以方便后面获取。一个按钮,这个按钮是很重要的,因为JS部分的内容大部分是写在它的点击事件里的,所有需要提前给它设置好id以方便后面获取。一个无序列表,这个无序列表里面是没有内容的,但它会在后面起到至关重要的作用,所有需要提前给它设置好id以方便后面获取。为了美观和效果需要给留...原创 2022-03-08 09:32:12 · 1098 阅读 · 0 评论 -
聊天框小案例
聊天框案例简单的用到了if判断如图:首先新建一个html文件,写好我们需要的内容两个对话框,但两个对话框是在一个div里的,而这个div会起到关键的作用,因为在写js代码时要获取到它,所有需要提前给它设置好id以方便后面获取。下拉框,下拉框里有两个内容所有要写两个option,也要给两个option设置好value值,第一个是0,第二个是1.这样是为了后面更好的进行判断,当然也要给下拉框设置好id以方便后面获取。输入框和按钮也要设置id以方便后面获取。但要注意我这里的发送按钮...原创 2022-02-22 18:05:03 · 674 阅读 · 0 评论 -
switch判断计算器
switch...case语句与if...else的区别:if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。switch...case语句是基于不同的条件执行相应的代码.分支少时if else效率更高.分支多时switch效率更高如图:switch语法说明:switch必须赋初始值,值与每个case值匹配。满足执行该case后的所有语句,并用break语句来组织运行下一个case。如所以case值都不匹配,执行default.原创 2022-02-21 16:56:24 · 455 阅读 · 0 评论 -
间隔性计时器
间隔性计时器(setlnterval()):在执行时,从载入页面后每隔指定的时间执行代码。语法:setlnterval(代码,交互时间);参数说明:1.代码:要调用的函数或要执行的代码串。2.交互时间:周期性或要调用的表达式之间的时间间隔,以毫秒计(1s=1000ms)。返回值:一个可以传递给clearlnterval()从而取消对“代码”的周期性执行的值。调用函数格式(假设有一个clock()函数)Setlnterval(“clock()”,1000)或...原创 2022-02-20 17:23:51 · 1173 阅读 · 0 评论 -
一次性计时器
一次性计时器:setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。语法:setTimeout(代码,延迟时间);参数说明:1.要调用的函数或要执行的代码串。例如:setTimeout(timrn,500);2.延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。*递归:程序调用自身的编程技巧称为递归(recurdion),就是在运行的过程中调用自己取消计时器clearTimeout():setTimeout()和clea.原创 2021-12-28 10:03:14 · 263 阅读 · 0 评论