javascript
半纸烟蓝
这个作者很懒,什么都没留下…
展开
-
选项卡切换
下面我们来做一个简单的选项卡切换。首先要实现的内容如下:当鼠标移动到选项1按钮时,按钮有高亮效果,同时内容区显示第一张图片当鼠标移动到选项2按钮时,按钮1去除高亮效果赋予给按钮2,同时内容区显示第二张图片那么这种效果时如何实现的呢,实现代码如下:很显然3个选项按钮都是由li来组成,按钮的高亮主要通过faker这个类来控制,哪个按钮有这个类,哪个按钮就会显示高亮,faker样式如下...原创 2019-01-19 20:54:19 · 314 阅读 · 0 评论 -
树形
树形,主要是对于一些可以进行选择的数据进行分类,同时可以层级之间的展开与收起,那么具体实现代码如下:Css: a { text-decoration:none; } li { list-style:none; } a:hover{ ...原创 2019-08-18 09:48:06 · 183 阅读 · 0 评论 -
联动下拉框
联动下拉框是通过第一个下拉框的选择来决定第二个下拉框的值,这就称为联动下拉框,联动下拉框可以是多级联动,由第一个决定第二个,由第二个来决定第三个,这样的层层联动可以构造出多级联动的下拉框,那么既然已经知道了思路,那么制作起来肯定也是非常简单的,具体看以下案例:首先看下要实现的效果:实现的效果是,选择第一个出现第二个,选择第二个出现第三个,那么实现代码如下:Css样式:.cont { ...原创 2019-08-18 09:32:10 · 646 阅读 · 0 评论 -
小星星评分制作
现在大多是评分都是使用五角星评分。那么这种评分是如何制作的呢,那么接下来使用例子进行制作演示。首先,在这里使用的时layui进行制作,那么使用layui的话首先肯定要先引入layui的css以及js,那么以下是源码:也就是,首先需要定义一个div来作为小星星的容器,然后再加载,渲染对应的模块,然后再设置对应的参数即可。以下是rate 组件提供的基础参数,你可根据实际场景进行相应的设...原创 2019-07-18 15:59:56 · 375 阅读 · 0 评论 -
上传图片方法2
上传图片的方法有很多,那么接下来说说其中的一种上传方法。这种方法不需要对控制器进行操作,直接在视图这边就可以实现,那么接下来使用一则例子来进行讲解,首先以下是html源码:思路:首先定义一个src为空的img标签,定义这个标签是用来加载上传的图片,然后定义一个类型为file的input标签,用于选择图片,那么接下来声名一个文件读取接口,然后当input标签有值的时候就会获取input标签里...原创 2019-07-08 08:20:34 · 247 阅读 · 0 评论 -
HTML内容转换成图片
把HTML转换成图片,这是在很多时候都会用到的,比如说证书的生成,打印,当把数据信息填写进证书里面的之后,就需要把这个html转换成图片,然后进行打印。当然了不仅仅只是只把证书生成图片那么简单,甚至只要你想,你还可以把整个HTML页面转换成一张图片都可以,那么接下来用一个简单的例子来演示如何把HTML生成一张图片首先这是定义好的html内容这个html页面这是一张证书那么接下来就把这个h...原创 2019-04-26 17:30:48 · 23861 阅读 · 1 评论 -
表单内容的获取与插入
Form表单相信大家都很熟悉,因为form表单无时无刻都会出现在我们互联网和现实生活当中,比如说用户登陆,注册用户,提交数据,用户反馈,这些都用到了form表单,那么在没有提交表单的时候就想获取到表单里面的数据这又改怎么办呢?那么接下来我们可以通过jQuery来实现表单内容的获取。首先我们先创建一个form表单,在这里我们是使用bootstrap4框架来搭建的。所以没有css样式提供参考。...原创 2019-02-06 21:53:42 · 561 阅读 · 0 评论 -
计时器
计时器,我们通常都会用计时器来执行一些操作,比如间隔多少时间之后执行代码和延长多少时间之后来执行代码等等。那么,计时器又分为两种,一种叫间隔性触发计时器,另一种叫一次性计时器(延时计时器)。间隔性触发计时器:setInterval() 每隔指定时间执行代码 clearInterval() 取消setInterval的设置(可以理解为删除计时器)一次性计时器 ...原创 2019-01-31 22:46:09 · 817 阅读 · 0 评论 -
使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时间,那么就没有什么效率可讲了,所以在这时候就需要用到我们的图表设计绘制工具:ECharts。ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大...原创 2019-01-19 21:19:58 · 1883 阅读 · 0 评论 -
倒计时
倒计时对于我们来说都是很熟悉的,就好比如说,我们在某一个网站上面买东西的时候,进入支付页面时那个页面里就有一个支付倒计时,如果在规定的时间里你不进行支付的话就会关闭此页面,那么这里也展示出了倒计时的作用,那么倒计时又是如何制作的呢,制作倒计时有很多种方法,在这里讲的这种是用javascript制作的,以下就用javascript来制作一个简单的倒计时,首先代码如下:<!doctype...原创 2019-09-28 08:43:26 · 153 阅读 · 0 评论