需求：实时监控文本输入框的字数，并加以限制1、实时监控当前输入字数，直接使用onkeyup事件方法，给输入框加maxlength属性限制长度。如： <div><textarea id="txt" maxlength="10"></textarea><p><span id="txtNum">0</span>/10</p></div> var txt = document.getElementById("txt");var txtNum = document.getElementById("txtNum");txt.addEventListener("keyup", function(){txtNum.textContent = txt.value.length;})此时已可...
一、用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说，直接写就可以了 <template><div id="app"><!-- 因为是自定义属性，所以要用到 v-bind ，简写为 : --><!-- 3.将 box 绑定给 div --><div :class="box"></div></div> </template><script> export default {name: app,data () {return {// 2.在 data 中把 yellow 赋给 boxbox: yellow}} } </script><style> /* 1.在样式表中写好样式 */ .yellow{width: 200px;he...
1.先clone项目到本地。2.git reset --hard commit 命令可以使当前head指向某个commit。完成html的基本布局 点击复制按钮来复制整个commit id。然后在项目根路径下运行 git reset 。用浏览器打开index.html来预览效果，该插件的html主要结果如下： <!-- 节点容器 --> <div class="dragrid"><!-- 可拖拽的节点，使用translate控制位移 --><div class="dragrid-item" style="transform: translate(0px, 0px)"><!-- 通过slot可以插入动...
效果展示：<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery.min.js" type="text/javascript"></script><script src="date.js" type="text/javascript"></script> </head> <script>/************************************************************* * 判断某天是不是工作日 * * @ date {Date} 要判断的日期(0000-00-00) *...
初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖，我选的是yarn，因为它快些 安装mint-ui yarn add mint-uimint-ui装好了，还要配置一下babel，方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件，启动的时候会报跟es2015相关的错，装一下 babel-preset-es2015 就好了 {"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2...
vue-koa2-token 基于vue的 做了token验证 前端部分（对axios设置Authorization） import axios from axios import store from ../store import router from ../router //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post[Content-Type] = application/json;charset=UTF-8; //创建一个axios实例 const instance = axios.create(); instance.defaults.headers.post[Content-Type] ...
以下是我们给大家分享是实例代码： <html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <canvas id=cvs width=1000 height="800"> </canvas> <script> const cvs =document.getElementById(cvs);// 计算画布的宽度const width = cvs.offsetWidth;// 计算画布的高度const height = cvs.offsetHeight; const ctx = cvs.getContext(2d);// 设置宽高cvs.width = width;cvs.height = height; /** ctx：context x,y:偏移...
今天用到城市选择，直接用拼音滑动方式来选择，用的时候引入jquery（个别样式需要自己修改） <div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div><!--省份列表--> <div class="dzhc_xs"><nav><div class="dhjt"><a href="JavaScrip:;" rel="external nofollow" class="yy_gb"><!--<img src="images/dhjt.png" alt="">--></a><span>全部地址</span></div></nav><!--显示点击的是哪一个字母--><div id="sh...
前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件，google查了下都是下拉框形式的，于是自己写了一个，希望对使用vue开发项目的朋友有帮助，下面话不多说了，来一起看看详细的介绍吧。 显示效果如下：注意：使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--><section class="showChose" v-show="showChose"><section class="address"><section class="title"><h4>居住地址</h4>...
前言一开始接触到vue中的组件的时候，对于组件的理解还是不够充分的，最近在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的，即所有的vue实际都可以运用到这个组件，局部组件就是针对某个实例来说的，只有这个vue实例下才能发挥作用，下面话不多说了，来...
实例如下所示： <!DOCTYPE html> <html> <head><title>判断div滑到底部的代码</title><script type="text/javascript" src="jquery-3.1.0.min.js"></script><style type="text/css">#scrollTest{width:100px;height:100px;overflow-y: auto;//当div中y方向的内容溢出时，y轴分别显示滚动条border:1px solid red;}</style> </head> <body><div id="scrollTest"><table><tr><td>111</td><td>222</td></tr><tr><td>111</td><td>222</t...
逻辑 判断内容滚动到底需要知道的信息 内容区域的真实高度（也就是滚动区域） 滚动条距离顶部的位置 内容区域的可见高度 分别对应下面的三个API。 element.scrollHeight 获取元素内容高度，，，【只读属性】 element.scrollTop 可以获取或者设置元素的偏移值，常用于，计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0. element.clientHeight 读取元素的可见高度【只读属性】 下面直接引用...
three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。好了，下面通过一段代码给大家介绍three.js加载obj模型，具体代码如下所示： <!DOCTYPE html> <html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript" src="libs/OBJLoader.js"></script><script type="text/javascript">var scene = null;var ca...
基本思路： 1）检测手指滑动方向：获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了 2）手指抬起后，向对应反向操作改变当前页的位置 具体代码如下： html <div id="wrap"><div id="page01" class="pages">第一屏</div><div id="page02" class="pages">第二屏</div><div id="page03" class="pages">第三屏</div><div id="page04" class="pages">第四屏</div> </div> <div id="dots"><span class="now"></span><spa...
上传图片到服务器： 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来。-wxml<view class="shangchuan" bindtap="choose"><image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image></view><button formType=submit class="fabu">发布项目</button>/**选择图片 */choose: function () {var that = thiswx.chooseImage({count: 1,sizeType: [original, compressed], ...