JS小实例
关注
分享
扫一扫
文章平均质量分 86
天蝎座的文子
这个作者很懒，什么都没留下…
展开
-
JS实现星级评分——简化版
过了一段时间，再次来实现星级评分，做了一定的简化，运用了函数传参、三目运算来实现简化。代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>星级评分</title> <style type="text/css"> body{...原创 2018-05-04 12:45:38 · 9136 阅读 · 8 评论 -
JS实现星级评分
记录一下自己写的代码和当时的思路： 星级评分的实现包含三个事件的实现，分别是鼠标移入、移出事件和点击事件，当鼠标移入时会显示当前星级，移出恢复没有评分状态，而当鼠标点击后，星级评分在鼠标移出后也不会改变。在自己实现的过程中，主要遇到的问题：（1）鼠标移入到低星级时高星级的星星会变成未选中状态的颜色 解决：给每个星星对象添加一个自定义属性，通过这个判断选中状态，再根据这个...原创 2018-04-13 13:14:59 · 3310 阅读 · 1 评论 -
简易聊天对话框(加滚动条)
今天看了几个JS的视频，老师布置了一个编写一个简易聊天对话框的任务，没有涉及到Ajax.主要实现了切换头像模拟两方的聊天情况，样式比较简单，后期可以进行美化。 需要注意的地方是我是用的ul li列表来实现元素的添加，这样更利于样式的设置，每添加一个对话框需要清除一下浮动，不然会出现连续几个对话框出现在一行的现象。代码如下：<!DOCTYPE html>...原创 2018-03-29 23:02:37 · 5440 阅读 · 2 评论 -
带缩略图的图片切换
图片切换的表现形式有很多种类型，下面展示的是带缩略图的图片切换，可以根据缩略图选择想要展示的图片。效果大概如下：主要运用了自定义属性，this循环为Li标签绑定鼠标移入、移出和点击事件。<!DOCTYPE html><html><head> <title>带缩略图的图片轮换</title><style type="te...原创 2018-03-31 20:53:58 · 746 阅读 · 0 评论 -
按钮控制菜单上下滚动
前两天学习了定时器，为了更好地理解，做了几个关于它的小练习。这个练习本来觉得很容易，但是花的调试时间最久，主要的问题就出在高度值的获取上，还有滚动对象的确定。我是利用top值的变化来实现滚动的功能，向上滚动top减小，向下滚动top值增加。获取页面当前的top值通过封装函数实现：实现top值的变化是通过定时器，定时器所需函数主要是实现相同时间间隔内top变化固定的值：需要注意的是z...原创 2018-04-14 22:48:14 · 857 阅读 · 0 评论 -
控制两张图片的切换
说到图片切换，形式那真是多种多样，这次写的是控制两张图片的分别切换和同时切换。 先上效果图： 如图所示，上面的一组按钮，实现同时控制两张图片切换的功能，分别使左右图片向上或向下切换。点击单张图片就可以自动向下切换。下面的文字说明和目录都是随着图片的切换而实时的变化。左右图片的数量是由两个数组决定的，可以不相等。代码如下：<!DOCTYPE html><...原创 2018-04-01 15:12:36 · 1678 阅读 · 0 评论