JavaScript小案例
文章平均质量分 55
# JavaScript小案例
熟悉的新风景
我还是喜欢呢个高中时候的自己
展开
-
使用markedjs预览md文件
11原创 2023-02-28 22:25:57 · 666 阅读 · 0 评论 -
datatable基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AdminLTE 3 | DataTables</title> <!-- Google Font: Source Sans.原创 2020-12-08 11:52:23 · 749 阅读 · 0 评论 -
datatable自定义搜索和导出按钮并解决在后端分页无法导出全部数据的问题
为了方便使用,即使是不懂datatable的人也能上手使用,所以还是自定义的好,按钮和搜索直接和往常一样根据html中定义按钮:分了两种,有一个特殊的类型colvis和普通的按钮colvis (".colvis").html((".colvis").html((".colvis").html(("#example_wrapper .buttons-colvis")); 直接写入dom元素普通导出按钮;在datatable写出按钮并在页面上显示自定义按钮,属性名data-type的值就是原创 2020-12-06 02:16:53 · 1080 阅读 · 0 评论 -
datatable导出按钮(excel)的设计(官方非自定义)
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>1151s</title> <!-- Google Font: Source Sans Pro --> <.原创 2020-12-06 01:23:06 · 909 阅读 · 0 评论 -
adminlte中datatable中自定义搜索和导出按钮
为了方便使用,即使是不懂datatable的人也能上手使用,所以还是自定义的好,这里就制作了一下按钮:分了两种,有一个特殊的类型colvis和普通的按钮colvis (".colvis").html((".colvis").html((".colvis").html(("#example_wrapper .buttons-colvis")); 直接写入dom元素普通导出按钮;在datatable写出按钮并在页面上显示自定义按钮,属性名data-type的值就是按钮的extend值点击原创 2020-12-06 01:13:11 · 1483 阅读 · 0 评论 -
datatable自定义表单或者导出excel按钮,搜索
完整版第一版,修改位置<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AdminLTE 3 | DataTables</title> <!-- Google Font原创 2020-12-04 23:06:50 · 489 阅读 · 0 评论 -
adminlte中数据表格datatable.js中的完整使用方法小案例
想必做过后端的人对数据表格都很熟系,可以说不可缺少,今天就给大家介绍一下用,基本用法,请复制第一个php和js文件,直接复制就可以使用,后面还有一个完整的,但是有的外部链接没找到,所以先和大家说一下最基本的表格,好了,请复制下看效果吧<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=de原创 2020-12-04 14:07:23 · 3421 阅读 · 2 评论 -
js常用代码之左右轮播图(无缝轮播)
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> /* ----------------------------------原创 2020-08-05 00:33:46 · 321 阅读 · 0 评论 -
使用layui实现后台数据表格显示时的需要修改的地方(包括后台)
使用laui https://editor.csdn.net/md/?articleId=1061823971,显示数据当加载页面时会自动请求一次axaj,表格根据请求到的数据进行列表2,查询数据显示和查询数据后台添加操作原创 2020-05-29 12:01:18 · 620 阅读 · 0 评论 -
通过ajax实现简单的数据交互(模板引擎)
最后的结果是这样的,样式什么的自己调节,本节主要内容是ajax。思路: 1,对ajax进行封装 2,调用ajax获取数据 3,在ajax获取成功的函数中进行操作 3.1,模板的书写 将需要改变的数据全部使用{# demo #}这样的格式书写,以便替换里面的数据 3.2,将模板里的数据替换成.json里的数据 3.2.1 创建一个模板格式化函数 使...原创 2020-01-02 13:12:14 · 590 阅读 · 0 评论 -
javascript之js实现简单的无缝轮播图(可调节方向)
本节介绍简单轮播图的做法,效果为,手机端时,向左有滑动一定的距离后,轮播图移动方向改变需求分析1 :实现无缝轮播。即从1-3或者从3-1无限循环2 :兼容手机端和pc端;主要是手机端3 :手机端时先左滑动一定距离时轮播图开始向左移动,相反,向右滑动一定距离时轮播图开始向右移动4 : 响应式布局,适用于各种分辨率<!DOCTYPE html><html> ...原创 2019-10-30 15:50:41 · 819 阅读 · 0 评论 -
javascript 简易选项卡
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简易选项卡</title> <style type="text/css"> body, ul, li { margin: 0; padding: ...原创 2019-07-25 12:05:55 · 266 阅读 · 0 评论 -
javascript 复选框(checkbox)全选/全不选/反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-07-27 20:18:23 · 750 阅读 · 0 评论 -
javascript 动画效果(多物体缓冲运动,多物体透明度变化,匀速移入移出、链式运动、同时运动)
多物体缓冲运动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-08-08 21:05:20 · 330 阅读 · 0 评论 -
javscript 简单拖拽(drag)拖放事件、dataTransfer详解,垃圾桶效果
例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5拖放API之回收站效果</title> <style type="text/css"> #container { border: 1px solid...原创 2019-08-10 23:37:57 · 1483 阅读 · 0 评论 -
javascript拖拽之从浏览器外拖拽(drag)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5拖放API之图片相框效果</title> <!-- <link rel="stylesheet" href="css/photoframe.css"> -->...原创 2019-08-11 19:05:05 · 943 阅读 · 0 评论 -
javascript 轮播图(缓存效果)详细篇
对现在的我来说,这样的操作还是有点麻烦,综合使用的话还是有很多毛病,话不多说,做一个上下平移的轮播图(纯js),因为不会,所以可能比较冗余,以便复习到更多知识点过程1、生出数字按钮,就是呢个代表着图片的小圆点,就暂且当图片不知道几张 1.1通过获取图片...原创 2019-08-06 20:20:53 · 669 阅读 · 0 评论 -
javascript基础之拖拽(1)(详细篇)--dataTransfer对象
最近学了的一些关于拖拽的一些案例,原来的认识太过浅薄,所以以多个案例说明一下相关知识点导航1,拖放事件 目标对象 过程对象 目标对象2,dataTransfer对象 ...原创 2019-09-06 20:40:21 · 990 阅读 · 0 评论 -
javascript基础之拖拽(2)(详细篇)---FileReader对象,blod对象
接上一篇文章:目标导航:4,FileReader对象(方法 事件) 4,1使用方法5,bold对象6,文件拖拽 =》从浏览器外获取数据 6.1,拖拽读取文件信息–使用dataTransfer 6.2拖拽显示图片及信息–使用blob对象4,File...原创 2019-09-07 19:49:49 · 431 阅读 · 0 评论 -
动画效果之文字显示效果(逐行显示和滚动显示)
文字逐行显示效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>使用原生js实现文字逐行显示<...原创 2019-09-19 16:33:54 · 3697 阅读 · 0 评论 -
javascript 修改图片地址(判断图片是否加载成功)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <...原创 2019-07-27 14:14:50 · 468 阅读 · 0 评论 -
javascript 用键盘控制DIV上下左右移动及放大缩小(event.keyCode及屏幕大小的用法)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-08-02 23:31:18 · 471 阅读 · 0 评论 -
javascript 鼠标移入移出改变图片透明度
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标移入移出改变图片透明度</title> <style type="text/css"> #image { margin: 50px auto; width...原创 2019-07-25 10:26:25 · 2313 阅读 · 0 评论 -
javascript 弹出层(警告框)的制作(css元素居中、javascript元素居中)
点击弹出警告框<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弹出层的制作</title> </head> <style type="text/css"> body { padding: 0; mar...原创 2019-07-24 21:09:29 · 344 阅读 · 0 评论 -
JavaScript 求和(字符串转换成数组、for循环求和)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>数组求和与字符串求和</title> <style type="text/css"> #case { width: 40%; height: 100px; ...原创 2019-07-24 18:26:49 · 1363 阅读 · 0 评论 -
javascript 提示框效果—鼠标移过显示车标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-07-26 20:04:52 · 367 阅读 · 0 评论 -
javascript 完美拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-08-04 12:01:49 · 203 阅读 · 0 评论 -
JavaScript 基础表单提交接受参数并弹出(获取form的几种方法 表单控件 推荐写法 延迟提交)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-07-22 13:34:23 · 564 阅读 · 0 评论