JavaScript案例
文章平均质量分 67
wait......
这个作者很懒,什么都没留下…
展开
-
【javaScript案例】之支付10秒倒计时
效果图如下:这个案例其实很简单,只要掌握了js基础中的onclick函数以及定时器的使用,就能快速的做出这样的效果,让我们一起来看看怎么做吧~首先需要两个html文件,在两个文件中利用html和css分别写好初始页面效果,在这里就不多说啦,具体可以看下面的代码让我们来谈谈js需要做出的效果:在页面1中点击支付要跳转到另一个文件中刚进入页面2时要开始计时10秒,计时结束后返回页面1点击页面2的立即返回能够返回到页面1这就是我们需要做的效果那我们要如何实现在两个页面之间的跳转呢?=>原创 2021-10-17 23:42:35 · 903 阅读 · 0 评论 -
【javaScript案例】之验证码的实现
今天的案例,效果如下:这个案例的实现其实没有很多难点,让我们一起来看看吧~html和css的实现,在这里就不做解释啦,可以比对下面的代码自己实现一下,注意一下细节就好了接着咱们来看看js的实现:我们需要做到的有两点:实现验证码的随机产生,使其在页面刷新和点击更换时能够生成实现输入字符串和验证码的比较第一点呢,我们需要用到for循环和Math.round(Math.random()*n),使得在每一次循环中可以产生随机数字第二点呢,我们只需要通过input.value来获得用户输入的字符原创 2021-10-18 23:03:48 · 1033 阅读 · 0 评论 -
【javaScript案例】之搜索的数据显示
今天的效果如下:这个案例的要点是使用CSS显示样式以及使用js比较原创 2021-10-19 23:09:31 · 254 阅读 · 1 评论 -
【javaScript案例】之进度条
这次的效果图如下:这个案例做起来不难,在我练习的时候,新知识点是使用window.getComputedStyle()函数获取元素的宽度值总的思路是在一个div盒子初始放入一个宽度为0的div盒子,然后在按钮的onclick回调函数中使用定时器改变其宽度值代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X原创 2021-10-24 22:45:36 · 244 阅读 · 0 评论 -
【javaScript案例】之鼠标拖拽效果
这次的效果图如下:我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果如何实现拖拽的效果呢?我们需要用到三个函数:onmousedown、onmousemove、onmouseup,分别表示鼠标按下、鼠标移动、鼠标抬起在鼠标按下的回调函数中,我们需要通过clientX和clientY获取鼠标的初始位置,通过offsetLeft和offsetTop获取盒子的初始位置,然后计算鼠标初始位置和盒子初始位置的差值;在鼠标移动的回调函数中,我们需要根据鼠标的位置和之前计算原创 2021-10-24 23:03:50 · 626 阅读 · 0 评论 -
【javaScript案例】之二级菜单的制作
这次实现的效果图如下:这个二级菜单实现的效果是:当点击某一个框时,会将已经打开的框的内容收回,再展开现在点击的框的内容。那要如何实现这个效果呢?我们可以step by step首先我们要将整个框架显示出来,即所有框展开的样子,因为其显示/不显示是拿overflow:hidden做的。但是要注意不要所有的框都拿一种类型的盒子做,因为那样不方便写js代码,毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框,所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其初始原创 2021-10-25 08:21:12 · 1454 阅读 · 0 评论 -
【javaScript案例】之放大镜效果的实现
这次实现的效果如下:这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S。为了实现相邻,我采用的方法是为其均设置position:absolute,然后设置left和top的值来使其相邻。小盒子S我们同样可以为其设置position:absolute,调整一下背景颜色即可。然后我们需要使用js来设置动画效果,即:鼠标放在盒子A上时,小盒子S的位置会随着鼠标原创 2021-10-26 23:22:41 · 735 阅读 · 0 评论 -
【javaScript案例】之类似购物车的效果实现
这次的效果如下图:实现的效果大概是在购物车界面选择想要选购的商品,提交后转到支付界面确认支付,最后支付成功后返回选购页面。我们这篇文章只讲解选购的页面,支付界面见下面这篇文章:(2条消息) 【javaScript案例】之支付10秒倒计时_qwerty053的博客-CSDN博客我们开始咯~我们首先来实现html和css的部分:如下图其实这个部分很考验基础功~,我们需要用到table标签,在td中写入对应的文字(具体可见下方的代码,可以根据自己的喜好添加样式)。重点其实在于js的部分:这个效原创 2021-10-28 23:35:22 · 316 阅读 · 0 评论 -
【javaScript案例】之抽奖器效果的实现
这次实现的效果如下图:所实现的功能是:当每次点击中间的抽奖按钮时,会随机选择一个盒子作为抽奖的结果。那我们要如何实现抽奖的功能呢?其实很简单,首先用html和css做出整体的框架,然后用js在中间按钮的onclick函数中设置定时器+随机改变某一盒子的背景颜色就可以了。 下面我们来讨论一下细节的方面:设计整体框架时,我们需要为每个盒子设置边框,这时会发现边框会出现重叠问题,导致边框变厚,解决的方法是:设置margin-right和margin-bottom为负值(值等于边框值)。.在js原创 2021-10-25 23:21:06 · 1395 阅读 · 0 评论