前端代码
关注
分享
扫一扫
Mr_ccup
这个作者很懒，什么都没留下…
展开
-
js 计时器 核心代码
小程序定时器代码示例下面是一个简单的例子，，后面显示最核心的代码片段// components/countDown/countDown.jsComponent({ /** * 组件的属性列表 */ properties: { startTime: { type: String, value: '' }, endTime: { type: String, value: '' } }, lif原创 2020-12-08 10:54:45 · 505 阅读 · 0 评论 -
小程序之 列表循环与自由选择器混搭（实现手动添加、删除列表，选择器互不干扰！）~~~
其实这个要明白列表循环与地区选择器的实现原理关键函数：e.currentTarget.dataset.id; //获取节点data - id 里面的内容！首先是html。。。。。。<view class="page-tips02">提示：此页面参数均为必填参数 </view><!-- 步骤进度 --><view class="proc...原创 2020-04-07 16:46:12 · 385 阅读 · 0 评论 -
电子书，turn.js 官方文档，翻译成中文 。2019.01.08翻译
// 基本用法$("#flipbook").turn({acceleration:true,})// 选件=============================================================================================// 加速--------------------------------------------...原创 2020-01-08 15:08:56 · 1653 阅读 · 0 评论 -
全选、全不选、反选
首先是img接下来是html：<form action="" method="get"> <ul id="list"> <li><label><input name="Fruit" type="checkbox" value="" /&原创 2019-02-25 15:47:34 · 343 阅读 · 0 评论 -
小程序单项选择以及自己遇到的坑（改变样式）——
直接贴代码：既然是单选列表肯定用到列表循环了——<!-- 这里使用了列表循环—— --><view class='money'> <block wx:for='{{arrays}}'> <view class='money_list' bindtap='tap' data-id='{{item.id}}'> <...原创 2019-04-29 03:02:01 · 402 阅读 · 0 评论 -
前端小程序多选列表（自定义，切换图片状态）
直接贴代码————我看了网上一些代码，我这个逻辑比较复杂一点——不顾看起来应该容易通俗易懂一些——wxml 里面用了列表循环<block wx:for='{{arrays}}'> <view class='list' bindtap='tap' data-id='{{item.id}}'> <view class='list_...原创 2019-04-29 17:12:04 · 1340 阅读 · 1 评论 -
移动端左侧抽屉点击二级列表——
整个逻辑很简单，没什么——//注意一个区别就好：$(select).index(this);$(this).index();它们两者的区别——————第一个是至返回的选择器的数组中所选择的第几项——第二个是当前选择的元素，在同胞元素中所排列的位置——（自行百度）下面：html这里面主要是左侧列表的内容信息；js引用，jq引用，css引用省略——<body&...原创 2019-05-28 10:29:36 · 1871 阅读 · 3 评论 -
客户B/S体系，移动端touch事件（touchstart，touchmove，touchend），定时器区分点击与长按！
首先是HTML；这里下载了一个封装touch事件的相关插件–> touch.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> //引用jq，我是直用的相关框架里面的jq...原创 2019-07-05 09:59:21 · 506 阅读 · 0 评论 -
前端JS实现数组增加不重复元素功能！（Arrays push（） ）
prototype. 属性是所有对象中的一个基本属性，他能使对象添加新的属性方法arguments 实参，js中参数的传递都是通过arguments数组（并不是Arrays的实现类）来遍历出参数的个数indexof() 方法，索引方法，如果不存在，返回-1；push() 原生数组在末尾添加参数，返回一个新的数组；Array.prototype.pushNoRepeat ...原创 2019-07-12 09:49:51 · 8161 阅读 · 0 评论 -
前端获取验证码的方式
web端页面js简单的逻辑代码这里我采用的是div方式并不是传统的button按钮pointerEvents：none 阻止当前元素相关事件 // 获取验证码的点击 var code = function () { var temp = { countdown: 60, } var settime = ...原创 2019-08-28 15:07:50 · 1490 阅读 · 0 评论 -
导航栏，下面的横线随事件而加载动画效果
使用JQUERY事件+相对应函数完美解决。html：class类名命名有些繁琐，懒得改了&lt;div class="top"&gt; &lt;div class="top_box"&gt; &lt;img class="top_box_img" src="#logo&q原创 2019-01-14 17:04:09 · 533 阅读 · 0 评论 -
小程序框内左右滑动效果
wxml：这里使用了一个列表循环<view class='father'> <block wx:for="{{arrays}}"> <view class='son' ></view> </block></view>wxss：主要代码：.father中：white-space: now原创 2019-01-03 10:16:29 · 1040 阅读 · 0 评论 -
css3中居中对其的4种方法~
html：这里设置父类为father；子类为son；&lt;div class="father"&gt; &lt;div class="son"&gt;&lt;/div&gt;js：1. 方法一（使用绝对布局）：.father{ width:500px; height:500px; po原创 2019-05-10 09:22:09 · 3081 阅读 · 0 评论 -
css文本溢出不换行，省略号显示
单行文本溢出；设置宽度，多于文本溢出，显示省略号；div{width:300px; overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap;}多行文本溢出；使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注意：1.-webkit-line-cl...原创 2019-05-10 09:22:01 · 1002 阅读 · 0 评论 -
小程序默认选择器
小程序的选择器是自带的；这里给他整理出来~wmxl：&lt;view class="container"&gt; &lt;!--选择器--&gt; &lt;view class="section"&gt; &lt;view class="section__title原创 2019-05-10 09:22:44 · 1155 阅读 · 0 评论 -
小程序弹窗
小程序自带的默认弹窗整理；wxml：<view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap=原创 2019-05-10 09:22:38 · 275 阅读 · 0 评论 -
小程序左侧抽屉动画（侧栏菜单）
小程序对于JS的高度封装让每个前端用户都有一种撕心裂肺的感觉；由于不能是用JS来获取DOM，所以以往使用Jquery编写的动画，在小程序里面都不能使用；****忘了从哪里看到的文章，这里我用自己的方式给他整理出来~知识都在于分享。首先微信下程序的每一个页面基本的格式是由四个文件来表现的，分别是：wxml结构层；wxss样式层；js逻辑层；json数据层；以下主要以前三个层来分别阐...原创 2019-01-02 16:02:36 · 4151 阅读 · 0 评论 -
小程序interval设置验证码
基本逻辑是设置一个数值，触发点击事件后禁用点击事件，60秒之内，每一秒执行一次函数（采用interval来处理），60秒后，还原；缺点：页面刷新函数重置；wxml：<button class='Code' style='background:{{background}}' disabled='{{disabled}}' data-id="2" bindtap="getBtn">{...原创 2019-05-10 09:21:42 · 253 阅读 · 0 评论 -
小程序默认跳转方式
利用小程序提供的 API 跳转//只能跳转到tabBar配置页面wx.switchTab({ url: '/pages/index/index',}); //返回上一级页面（delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页，默认值为1）wx.navigateBack({ delta: 2}) //关闭当前页面，跳转到应用内的某个页面wx.re...原创 2019-05-10 09:21:30 · 707 阅读 · 0 评论 -
列表循环
wxml：data-id声明数据<block wx:for='{{arrays}}' ><view class='one' bindtap='tap' data-id='{{item.id}}'>{{index}}: {{item.id}}</view></block>js：event.currentTarget.dataset...原创 2019-05-10 09:21:09 · 1043 阅读 · 0 评论 -
点击按钮比变色，点击其他变色，其他恢复默认（$.each（）函数增加CSS，移除CSS）
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;userInformation.html&lt;/title&gt; &原创 2019-05-10 09:22:53 · 1464 阅读 · 0 评论