JavaScript - 教程之家

84浏览

0评论

解决layui下拉框监听问题(监听不到值的变化)

关于layui监听下拉框值得变化，大家都知道官方文档给我们提供了一个方法form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值})按照我...

2020-05-27

40浏览

0评论

layui下拉列表select实现可输入查找的方法

如下图，这是一个layui的下拉列表select，随着下拉数据越来越多，我们找某个选项就比较吃力了。这是原下拉列表的代码（数据是从后台传来的）：为了解决这个问题，我们可以将select改为可...

2020-05-27

53浏览

0评论

layui的数据表格+springmvc实现搜索功能的例子

如下所示：主要在前端页面加：<div class="demoTable"> 搜索ID： <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"...

2020-05-27

51浏览

0评论

关于layui的下拉搜索框异步加载数据的解决方法

思路分析：当我使用layui默认的下拉搜索框的时候，layui会默认渲染出一个HTML结构，所以我把渲染出来的这个结果直接给复制出来，这样css的样式就不用从头到尾写一遍了，前端代码（我用...

2020-05-27

78浏览

0评论

layui的select联动实现代码

要实现联动效果注意两点：第一要可以监听到select的change事件；第二异步加载的内容，需要重新渲染后才可以正常使用。html结构：<form class="layui-form batchinput-form" action...

2020-05-27

36浏览

0评论

Layui带搜索的下拉框的使用以及动态数据绑定方法

说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影...

2020-05-27

59浏览

0评论

Layui选项卡制作历史浏览记录的方法

在很多情况下我们需要使用到历史浏览记录这一个功能，自己制作起来有点麻烦，但是layui的element模块给我们带来了不少的功能，这个模块就是Tab选项卡，例如以下的样式。这里是侧边...

2020-05-27

55浏览

0评论

layui table 表格上添加日期控件的两种方法

方法一：var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: "auto" , id: "tbtxrz"...

2020-05-27

46浏览

0评论

layui时间控件选择时间范围的实现方法

解决layui时间控件清空之后无法正常使用的问题，以及时间范围的选择共有两种解决方式：方式一(layui 1.x)：html代码：<div class="layui-inline"> <div class="layui-input-inline...

2020-05-27

50浏览

0评论

laydate只显示时分不显示秒的功能实现方法

场景最近有个需求，需要选择时间段，例如10:00 ~ 12:30。目前的系统前端用的是layui，时间插件自然是选择了laydate。查阅了laydate的api发现并没有直接可以设置去掉秒并且分钟只...

2020-05-27

89浏览

0评论

JavaScript生成随机验证码代码实例

利用canvas制作一个随机验证码：　　1、clearRect：context.clearRect(x,y,width,height);清空给定矩形内的指定像素　　2、fillStyle：设置画笔的颜色　　3、rotate(deg)：旋转角度...

2020-05-27

98浏览

0评论

解决layui laydate 时间控件一闪而过的问题

问题：一个页面多次重载时间控件，并且都是不同页面，会导致时间控件绑定了，又被覆盖其他id的时间控件，又重新绑定上去。就会导致点击日期框，弹框一闪而过，从其他弹窗切换回来，又有了...

2020-05-27

86浏览

0评论

javascript头像上传代码实例

上传头像：相关关键词：ondragover（拖动元素在投放区内移动）ondrop （元素放在投放区触发但是要去处理浏览器默认事件的影响：ondragenter、ondragover）dataTransfer（它可以保存一项或多...

2020-05-27

59浏览

0评论

json字符串对象转换代码实例

这篇文章主要介绍了json字符串对象转换代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下1、将字符串转为json对...

2020-05-27

65浏览

0评论

JavaScript实现轮播图效果代码实例

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下HTML部分：<!-- HTM...

2020-05-27

112浏览

0评论

解决layui批量传值到后台操作时出现传值为空的问题

如图，前台的样子，data的参数为[{"good_id":1,"good_name":"标样-总磷","good_num":"BY400014","pid":10,"first_pid":1,"good_standard":"1.46mg/L","good_cas":"7220-81-7"...

2020-05-27

64浏览

0评论

layui table 列宽百分比显示的实现方法

废话不多说了，为大家分享一下layui实现 table 列宽百分比显示的实例代码，希望对大家有所帮助吧var layer = layui.layer, form = layui.form, table = layui.table; var...

2020-05-27

60浏览

0评论

解决layui-table单元格设置为百分比在ie8下不能自适应的问题

1.如果没有采用响应式布局，指定表格的宽度即可解决比如table{ width:1400px !important;}2.如果采用了响应式布局,使用media query查询不同分辨率下的table宽度，然后指定大小...

2020-05-27

94浏览

0评论

解决Layui数据表格的宽高问题

在使用Layui数据表格的时候，如果采用固定数值的话，在不同浏览器里显示会有差异，特别是在不同分辨率设备上。针对以此，把width设置直接去掉，貌似解决了我的显示问题。之前固定宽高...

2020-05-27

51浏览

0评论

JavaScript获取页面元素的常用方法详解

1、通过标签获取元素，返回一个数组　　var li = document.getElementsByTagName('li');//标签获取元素　　li[0].innerHTML;// 查看获取元素的内容　　li[0].innerHTML = "co...

2020-05-27

90浏览

0评论

layui+jquery支持IE8的表格分页方法

工具（框架、插件）1、layui-v1.0.9
2、jquery-1.8.3代码1、jsp代码(可忽略jsp部分，转成html)<%@ page language="java" contentType="text/html; charset=utf-8"%><%@ include f...

2020-05-27

112浏览

0评论

在layui中对table中的数据进行判断(0、1)转换为提示信息的方法

需要把“1”改成中文汉字：在 done方法里面进行数据渲染：layui.use('table', function(){ var table = layui.table ,form = layui.form; tableIns=table.render({ elem:...

2020-05-27

48浏览

0评论

JavaScript实现秒杀时钟倒计时

本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码，供大家参考，具体内容如下功能介绍：1.时/分/秒倒计时直至为零所有代码<!DOCTYPE html><html> <head> <meta chars...

2020-05-27

37浏览

0评论

layui数据表格 table.render 报错的解决方法

一、报错信息Whitelabel Error PageThis application has no explicit mapping for /error, so you are seeing this as a fallback.Wed Jan 23 15:20:18 CST 2019There was...

2020-05-27

73浏览

0评论

react用Redux中央仓库实现一个todolist

本文实例为大家分享了react用Redux中央仓库实现一个todolist的具体代码，供大家参考，具体内容如下Redux简单介绍Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具...

2020-05-27

46浏览

0评论

解决layui页面按钮点击无反应,也不报错的问题

解决仔细检查代码发现 js 代码中一句代码错误以上这篇解决layui页面按钮点击无反应,也不报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持...

2020-05-27

72浏览

0评论

20多个小事例带你重温ES10新特性(小结)

ES10 虽然没有像 ES6 那么多新特性，但 ES10 仍然有一些有用的特性。文本通过简单示例来介绍了 ES10 新出来的特性。通过这种方式，咱们就可以快速理解，而不需要看太多的官方解释...

2020-05-27

36浏览

0评论

layui之数据表格--与后台交互获取数据的方法

jsp或html<table id="userList" lay-filter="userList"></table>js//用户列表var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cell...

2020-05-27

44浏览

0评论

在Layui中实现开关按钮的效果实例

首先引入js,css<script src="/common/plugins/layui-v2.2.5/layui.js" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="/common/plugins/layui-v2...

2020-05-27

73浏览

0评论

关于layui 实现点击按钮添加一行(方法渲染创建的table)

目标：layui 实现点击按钮添加一行解决方案：方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个<tr> 标签；方案2、table 是用方法渲染的方式创建的，...

2020-05-27

60浏览

0评论

React-redux实现小案例（todolist）的过程

使用React-redux实现，待办事项todolist案例。
注：以下列出主要页面代码，为说明React-redux实现的过程，所以并没有将案例的完整代码展示！一、全局安装：rudux、react-redux
npm inst...

2020-05-27

73浏览

0评论

为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置

公司项目的面包屑导航是使用 element 的面包屑组件，配合一份 json 配置文件来实现的，每次写新页面都需要去写 json 配置，非常麻烦，所以写一个面包屑cli，自动生成页面、自动配置面...

2020-05-27

53浏览

0评论

微信小程序轮播图实现原理及优化详解

轮播图的创建
第一步：在页面创建swiper组件第二步：编写js页面注意事项：wx：for渲染我们js中的图片数组，item默认写法，获取我们的图片数组中的图片，可通过增加wx:for-item="it"来改变...

2020-05-27

49浏览

0评论

微信小程序行的删除和增加操作实现详解

第一步：在项目的app.json中创建一个新的页面（页面名称英文，可自定义）第二步：在创建的新页面中编写页面（注意bindtap属性值，因为是我们的js的函数方法名）第三步：在对应的js里设置全局...

2020-05-27

41浏览

0评论

js 下拉菜单点击旁边收起实现(踩坑记)

背景：
最近在搞一个需求：搜索框，输入时显示联想词下拉列表，当点击联想词跳转到搜索页，如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦（blur）去做收起操作避免body...

2020-05-27

48浏览

0评论

在vue中根据光标的显示与消失实现下拉列表

重点知识mousedown事件：mousedown的执行顺序大于blur事件
HTML代码<template> <div> <input ref="search" @focus="showList(true)" v-model="search" @blur="showList(fals...

2020-05-27

94浏览

0评论

JS回调函数简单易懂的入门实例分析

本文实例讲述了JS回调函数。分享给大家供大家参考，具体如下：初学js的时候，被回调函数搞得很晕，现在回过头来总结一下什么是回调函数。什么是JS？（点击查看）下面先看看标准的解释：<scr...

2020-05-27

55浏览

0评论

React+Redux实现简单的待办事项列表ToDoList

使用Redux做了一个简单的ToDoList待办事项列表，具体如下
这个例子也是源于Redux作者Dan Abramov的视频demo
还要特别说明一下
我还没有使用react-redux库进行解耦（可能以后...

2020-05-27

32浏览

0评论

HTML+JavaScript实现扫雷小游戏

本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码，供大家参考，具体内容如下工具：Sublime Text / Dreamweaver /Hbuilder<!doctype html><html><head><meta charset="ut...

2020-05-27

42浏览

0评论

Bootstrap实现模态框效果

一、模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。二、如果想要单独引...

2020-05-27

63浏览

0评论

微信小程序实现分享商品海报功能

我们在微信小程序中经常会使用到分享商品海报，或者是重绘微信小程序分享链的图片功能。实现该功能只要跟着如下几个步骤就可以快速实现啦！（本文示例代码使用的是uni-app，原生或...

2020-05-27

52浏览

0评论

createObjectURL方法实现本地图片预览

ie6 可以直接显示本本地路径的图片如： <img src="file://c:/3.jpg" /> ~~~网上都说ie7就不支持这种文件系统路径的url，但测试 xp ie8还是可以的ie8+ alphaImageLoader滤镜方...

2020-05-27

69浏览

0评论

vue实现select下拉显示隐藏功能

今日，怂怂就来说说，在项目中刚遇到这么一个功能需求；描述：当下拉选择不同的属性选项，需展示对应的内容界面；select下拉菜单如下：当下拉选择【表结构变更】、即展示如下界面：当下拉选...

2020-05-27

48浏览

0评论

js实现图片上传即时显示效果

前言h5实训时实现的一个图片上传即时显示的效果，如下图所示
正文Html代码<form action="" method="POST" role="form"> <div class="form-group"> <label for="touxiang" >头...

2020-05-27

55浏览

0评论

vue自动化路由的实现代码

目的解放双手，从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时，无需多虑，router-auto是你的最优选择，它帮你解决路由的维护成本，你只需...

2020-05-27

48浏览

0评论

JavaScript键盘事件响应顺序详解

本文实例为大家分享了JavaScript键盘事件响应顺序的具体实现代码，供大家参考，具体内容如下键盘响应顺序当按下键盘时，会触发多个事件，它们将按顺序发生。对于字符键来说，键盘事...

2020-05-27

109浏览

0评论

laravel实现中文和英语互相切换的例子

resources文件下面有一个lang文件夹下面有一个en文件夹，这里就是后面要使用到的存放语言的语言包的地方了。下面设置app.php里面的语言驱动。这里我设置的是en，到时候就会使用...

2020-05-27

55浏览

0评论

解决vue cli使用typescript后打包巨慢的问题

前言最近新开了一个项目，虽然用的是 vue 技术栈，但是为了项目的健壮性，还是强上了 typescript, 于是引出了下面的问题。问题
之前使用过 ts-loader 打包 react 项目，给我的感觉...

2020-05-27

42浏览

0评论

JavaScript实现单图片上传并预览功能

本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单图片...

2020-05-27

39浏览

0评论

浅探express路由和中间件的实现

1. Express简介
express是一个基于node.js平台的极简，灵活的web应用开发框架，它提供一系列强大的特征，帮助你创建各种web和移动设备应用
express框架核心特征：可以设置中间件...

2020-05-27

热门文章