前端开发

JQuery插件tablesorter表格排序实现过程解析

简介 Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 使用说明 引入jquery.tablesorter 所用文件下载: jquery-2.0.2.min.js jquery.tablesorter.min.js tablesorert官网 http://tablesorter.c... »

浅谈vue的第一个commit分析

为什么写这篇vue的分析文章?对于天资愚钝的前端(我)来说,阅读源码是件不容易的事情,毕竟有时候看源码分析的文章都看不懂。每次看到大佬们用了1~2年的vue就能掌握原理,甚至精通源码,再看看自己用了好几年都还在基本的使用阶段,心中总是羞愧不已。如果一直满足于基本的业务开发,怕是得在初级水平一直待下去了吧。 »

vue.js实现简单购物车功能

本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下 这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出。 购物车功能有:全选和选择部分商品,选中商品总价计算,商品移除,以及调整购买数量等功能。 js主要有以下方法 加函数,减函数,手动修改数量判断库存函数,总价格计算函数,单选事件,全选事件,一共分为6个事件 具体效果如下图 代码在这里 main... »

vue+Element中table表格实现可编辑(select下拉框)

最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框;并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同;有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下:HTML代码: »

django简单的前后端分离的数据传输实例 axios

前端使用的是vue,下面是axios的主要代码 methods: { search: function () { var params = { content1: this.content1 } this.$axios.post("http://127.0.0.1:8000/search/", params) .then((response)=> { console.log(response... »

详解flex布局中保持内容不超出容器的解决办法

在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中,如果文字很长,这时候文字就会超出容器,而不是呆在设置好的动态剩余的空间中。而且因为设置了 nowrap 会发现文字会将 content 撑开,导致内容超出了屏幕。因此猜测是flex布局的问题,进一步猜测省略符需要对父... »

HTML行内元素与块级元素有哪些及区别详解

想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?HTML可以将元素分为行内元素、块状元素和行内块状元素三种。到此这篇关于HTML行内元素与块级元素有哪些及区别详解的文章就介绍到这了,更多相关HTML行内元素与块级元素内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

使用原生JS实现滚轮翻页效果的示例代码

与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。 »

JavaScript基于用户照片姓名生成海报

前言 最近在为公司的一个比赛制作专题页,碰到一个使用参赛者上传的照片生成专属海报的需求,实现过程中用到了一些以前没用过的 api,也踩了一些坑,于是将其记录下来。 需求描述 用户点击按钮进行照片上传 照片上传完成后,将照片进行裁剪,并和海报背景、姓名等组合得到海报 将生成的海报上传 效果大概如下: 海报背景: 成品: 实现过程 1、初始化 canvas canvas#poster-canvas(w... »

js实现九宫格布局效果

本文实例为大家分享了js实现九宫格布局效果的具体代码,供大家参考,具体内容如下 效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; pa... »

JS array数组检测方式解析

typeof var arr = [1,2,3]; console.log(typeof arr);//'object' 数组的本质是一种特殊的对象,所以返回’object’。typeof运算符只能用来区分原始类型和对象类型,所以无法具体的检测出Array instanceof var arr = [1,2,3]; console.log(arr instanceof Ar... »

微信小程序开发之获取用户手机号码(php接口解密)

后边要做一个微信小程序,并要能获取用户微信绑定的手机号码。而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如既往的乱,如果没有对小程序开发文档有一个整体的了解,搞懂解密流程还是有点难的。这里把小程序从请求用户授权获取手机号码直至获取到手机号码明文的整个流程串了起来,方便迅速了解,如下: 一. 前端相关操作:... »

JS定时器如何实现提交成功提示功能

应用场景:   用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功。 HTML: {#评论成功提示#} <div class="popup_con" style="display: none; margin-left: 300px"> <div class="popup" > <p style="color: red; font-size: 1... »

基于javascript处理二进制图片流过程详解

今天学习怎么生成二维码,我习惯所有请求都用ajax完成 但是今天发现jquery的ajax不支持二进制,只能搞纯文本 于是百度之后手动实现这一功能 function getBinary(url, args, success) { var xmlhttp = new XMLHttpRequest(); var data = eval(args); var i = 0; for (var key in... »

jQuery noConflict() 方法用法实例分析

本文实例讲述了jQuery noConflict() 方法用法。分享给大家供大家参考,具体如下: jQuery – noConflict() 方法 如何在页面上同时使用 jQuery 和其他框架? 要解决这个问题,只需要使用jQuery中的noConflict()方法,它允许你在同一个页面加载多个jQuery实例,尤其是不同版本的jQuery。 jQuery 和其他 JavaScrip... »

从零开始在vue-cli4配置自适应vw布局的实现

简介 viewportWidth也是vw布局从配置上来说比rem布局简洁了很多,bu需要配置安装lib,也不需要增加一个rem.js文件 简称拎包使用 安装包 npm install postcss-px-to-viewport -D 或者 yarn add postcss-px-to-viewport -D 配置移动端 在vue.config.js中找到loaderOptions,如果没有的话需... »

vue实现简单学生信息管理

本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息管理</title> <link rel="stylesheet" href="./l... »

记一次用ts+vuecli4重构项目的实现

项目背景: 一个以前的项目( 刚入职实习的时候写的,用的vuecli2 ),然后这次要添加修改东西,看着代码看的头大,冲动之下就重构了( 想打死自己,写的啥玩意 ),刚好用下最近刚学的typescript,从搭建开始,一步步更新记录下,怕自己之后忘了再回过头来看看。( 顺便说一句,用起来有点别扭,不过还是挺爽的,期待vue3.0… ) 一.项目搭建: 使用命令   ... »

vue+koa2搭建mock数据环境的详细教程

前段时间写了一篇前端vue项目实现mock数据方式的文章,主要是在vue项目里使用mock数据,数据和项目耦合在一起,不太优雅,作为一个有追求的前端,怎么能容忍这种方法呢?特以此篇,记录利用koa2搭建服务端,提供mock数据的方法。 初始化vue项目 这里以vue项目为主,当然别的类型项目依然可以使用这种mock数据的方式。 vue create vue-koa2-demo 前提是安装了vue-... »

css3实现背景模糊的三种方式(小结)

一、普通背景模糊 代码: <Style> html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; } /*背景模糊*/ .bg { width: 100%; height: 100%; position: relative; background: url("./bg.jpg") no... »

24个ES6方法解决JS实际开发问题(小结)

本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。 1、如何隐藏所有指定的元素: const hide = (el) => Array.from(el).forEach(e => (e.style.display = 'none')); // 事例:隐藏页面上所有`<img>`元素? hide(document.querySe... »

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据。 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view c... »

微信小程序实现电子签名并导出图片

本文实例为大家分享了微信小程序做电子签名,并导出图片的具体代码,供大家参考,具体内容如下 wxml: <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="... »

基于JS实现table导出Excel并保留样式

浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td>公司一</td> 效果: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=... »

JavaScript链式调用原理与实现方法详解

本文实例讲述了JavaScript链式调用原理与实现方法。分享给大家供大家参考,具体如下: 1、什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return this返回当前调用方法的对象。 首先,我们先来看看一般函数的调用方式 (1)先创建一个简单的类 //创建一个bi... »

Page 1 of 2435123»