Welcome

首页 / 脚本样式 / JavaScript

利用Vue.js实现checkbox的全选反选效果

2017-02-06 23
前言这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.html示例代码<template> <div> <input type="checkbox" class="input-checkbox" v-model="checked" v...

js实现消息滚动效果

2017-02-06 31
今天教大家做个消息滚动的小功能。实现的很简单。自己都有点意想不到呢~ 哈哈1.实现的中心思想，如图所示：2.图片移动，用的是appendTo（）这个方法。这个方法是先将标签从父标签中删除，然后拼接到某个标签后面，所以也就是替我们实现了，remove（）这个方法。所以用这个方法是极好的~3.然后就会用到定时器了。用定时器每次调用移动方法，让<ul>每次执行一个动画，改变它的margin-top值，执行完动画后，再将它的margin-top变为初始...

jQuery Masonry瀑布流插件使用方法详解

2017-02-06 40
用jQuery Masonry 插件创建瀑布流式的页面我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式，下面介绍一下方法。1、分别下载 jQuery 与 Masonry ，然后把他们都加载到页面中使用。加载代码：<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script src="http://jq22.q...

AngularJs 利用百度地图API 定位当前位置 获取地址信息

2017-02-06 42
第一、申请百度密钥 很简单的几步就搞定第二、引入文件<！-- 百度地图定位 --><script src="http://api.map.baidu.com/components?ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?...

EasyUI修改DateBox和DateTimeBox的默认日期格式示例

2017-02-06 28
最近整理Easyui控件的时候，对Easyui的DateBox控件和DateTimeBox控件进行了梳理，而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起，归为一类，是因为这两个控件没有什么区别，如果你非得说这两个控件有区别，也无非是DateTimeBox控件后面除了基本的年月日之外带上了小时或者分钟或者秒什么的，更何况，这两个控件在进行日期格式化时所采用的方法也是一样的。DateBox介绍：Demo实例参看：http://...

js实现简单的网页换肤效果

2017-02-06 26
中心思想：网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤计入Cookie中，这样用户已下次访问时，就可以显示用户自定义皮肤了步骤：1.在设计HTML代码时，用了一些小技巧，就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。2.HTML结构要有一个带id的样式表链接，通过操作该链接的herf属性的值，从而实现换肤<link rel="stylesh...

原生js实现中奖信息无间隙滚动效果

2017-02-06 29
知识要点1.实现原理：通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份，再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。2.用到的属性方法：setInterval（） //每隔一定时间执行一次函数，可以无限执行下去clearInterval（） //清除指定的setIntervalsetTimeout（） //经过一定时间执行一次函数，只能执行一次，如果要无限下去需要在函数里自行设置clearT...

详解jquery validate实现表单验证 （正则表达式）

2017-02-06 51
一、目的为了更好地实现人机交互，使用jQuery封装库中的validate插件，在用户填写表单时，可以快速地对用户填写的数据进行验证，并做出反馈。二、validate插件简介validate（）是插件的核心方法，定义了基本的校验规则和一些有用的配置项。rule:设置表单的验证规则；messages:设置表单不符合验证规则的提示信息；debug:如果这个参数为true,那么表单还会提交，只进行检查，调试时十分方便。required:必填minlength:最...

原生js实现返回顶部缓冲效果

2017-02-06 24
运行原理通过定时器30毫秒执行一次滚动条上升，每次上升的高度为当前高度的80%，这样就达到了上升缓冲的动画效果。判断当滚动条高度超过一屏时，按钮显示，默认隐藏知识要点scrollTop//获取滚动条高度 需要写兼容clientHeight//可视窗口高度 需要写兼容setInterval//定时器window.onscroll//滚动触发事件完整代码<！DOCTYPE html><html lang="en"><head>...

原生js实现节日时间倒计时功能

2017-02-06 21
知识要点1.实现原理：用结束时间-当前时间=时间差当前时间每过1秒时间差自然也就少了1秒所以要1秒更新一次当前时间就达到了倒计时的效果2.需要注意的就是时间之间的转换和对得出数值的处理3.用到的方法：obj.getTime（） //换算成毫秒Math.floor（） //把小数点向下舍入结果取一个整数50%24 // 这是对数值求余的方法，意思是 假如有50个小时，一天24个小时 这个得出的结果就是 余数是2具体的数值的运算处理完整代码里有详细的注释完整代...

基于JavaScript实现窗口拖动效果

2017-02-06 20
写法类似于上一篇，水平进度条拖拽，具体内容如下<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.nav{width: 100%;height: 20px;background-color: #ccc...

原生js获取浏览器窗口及元素宽高常用方法集合

2017-02-06 30
窗口可视区域宽度： document.documentElement.clientWidth || document.body.clientWidth;窗口可视区域高度： document.documentElement.clientHeight || document.body.clientHeight;窗口可视区域宽度+边线和滚动条： document.body.offsetWidth ;窗口可视区域高度+边线和滚动条： document.body.o...

JavaScript实现水平进度条拖拽效果

2017-02-06 20
本文实例为大家分享水平进度条拖拽效果的js具体代码，供大家参考，具体内容如下<html><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.scroll{margin:100px;width: 500px;height: 5px;background: #ccc;posit...

JavaScript实现垂直滚动条效果

2017-02-06 24
本文实例为大家分享了js垂直滚动条的实现代码，供大家参考，具体内容如下1、红色盒子高度计算公式：容器的高度 / 内容的高度 * 容器的高度2、红色方块移动一像素 ，我们的内容盒子移动多少呢？ （内容盒子高度 - 大盒子高度） / （大盒子高度 - 红色盒子的高度） 计算倍数（内容盒子高度 - 大盒子高度）/ （大盒子高度 - 红色盒子的高度） * 红色盒子移动的数值<html><head><meta charset="UTF-...

javascript中json基础知识详解

2017-02-06 30
大致介绍JSON（JavaScript Object Notation JavaScript对象表示法）,JSON是一种数据格式，不是一种编程语言。虽然它的名字中有JavaScript但是它却不属于JavaScript,就像Java和JavaScript的关系一样。而且，并不是只有JavaScript才使用它,毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。JSON是由Douglas Crockford在2001年提出...

EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法

2017-02-06 28
1：首先赋值要在页面加载后才能赋值，也就是在onLoad中；2：是因为dialog里的输入域用了textbox控件,如果需要赋值,那么要调用textbox的赋值方法,而不是$（"#userName"）.val（row[0].User_name）;因为easyui的textbox控件,初始化之后,会将原输入域隐藏起来,而控件实际展示的,是easyui所生成的输入域.可以使用浏览器查看控件初始化之后的dom结构就知道了.所以将赋值语句修改为$（"#dilog_...

JS生成一维码（条形码）功能示例

2017-02-06 32
本文实例讲述了JS生成一维码（条形码）功能的方法。分享给大家供大家参考，具体如下：1、js代码：（function（） { if （！exports） var exports = window; var BARS= [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,122132,122231,113222,123122,12...

原生JS实现几个常用DOM操作API实例

2017-02-06 24
原生实现jQuery的sibling方法<body><span>我是span标签</span><div>我是一个div</div><h1 id="h1">我是标题</h1><p>我是一个段落</p><script type="text/javascript">//获取元素的兄弟节点function siblings（o）{//参数o就是想...

详解支持Angular 2的表格控件

2017-02-06 25
前端框架一直这最近几年特别火的一个话题，尤其是Angular 2拥有众多的粉丝。在2016年9月份Angular 2正式发布之后，大量的粉丝的开始投入到了Angular 2的怀抱。当然这其中也包括我。如果你想了解Angular 2，推荐官方网站：英文版、中文版。通过快速起步，可以快速体验Angular 2。公司的一个项目想基于Angular 2的2.4 版本进行开发，目前还在进行前期的调研阶段。我担当的任务就是研究基于Angular 2的UI控件，在官方网...

使用JavaScript触发过渡效果的方法

2017-02-06 30
使用 :hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的。和普通过渡一样，先创建两个样式规则，一个是元素的初始状态，一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。下面以一个日夜景图片切换的样例演示：（1）日景和夜景是两张图片叠在一起的。夜景图初始透明度是0，覆盖在日景图上方。（2）点击“看夜景...
<< 21 22 23 24 25 26 27 28 29 30 >>
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图