m_uncle
m_uncle

Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch

**

Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch

**
这是一个用vue.js写的一个仿滑动解锁的demo，和对Touch的一些理解

以下是四种touch事件

  1. touchstart: //手指放到屏幕上时触发

  2. touchmove: //手指在屏幕上滑动式触发

  3. touchend: //手指离开屏幕时触发

  4. touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。
所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

实例如下：


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script src="https://unpkg.com/vue">script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta content="telephone=no" name="format-detection">
        <style>
            *{padding: 0;margin: 0;}
            body {background: #EEEEEE;}
            .box {text-align: center;}
            .btn {
                position: relative;
                width: 70%;
                height: 40px;
                margin: 150px auto;
                border-radius: 20px;
                background: #333333;
            }
            .btn-move {
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background: #ededed;
            }
            .tt {
                font-size: 20px;
                color: #008000;
                text-align: center;
                margin-top: 50px;
            }
        style>
    head>
    <body>
        <div id="box">
            <slide-release>slide-release>
        div>

        <script type="text/x-template" id="slide">
            

                <div class="btn" ref='remove'>
                    <span ref='btnImg' class="btn-move"  
                      @touchstart='touchStart' 
                      @touchmove='touchMove' 
                      @touchend='touchEnd' 
                      :style="slideEffect"
                     >
                    span>
                div>
                <p class="tt" v-show="isShow">你滑动成功了！p>
            div>


        script>
        <script>
            Vue.component('slide-release',{
                template:'#slide',
                data:function(){
                    return {
                        isShow:false,
                        startX:0,//开始触摸的位置
                        moveX:0,//滑动时的位置
                        endX:0,//结束触摸的位置
                        disX:0,//移动距离
                        slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider"

                    }
                },
                methods:{
                    touchStart:function(ev) {
                        ev = ev || event;
                        ev.preventDefault();
//                      console.log(ev.targetTouches);
//                      console.log(ev.changedTouches);
                        if(ev.touches.length == 1) {    //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
                            this.startX = ev.touches[0].clientX; // 记录开始位置
                        }
                    },
                    touchMove:function(ev) {
                        ev = ev || event;
                        ev.preventDefault();
                        let btnWidth = this.$refs.remove.offsetWidth;  //$refs 减少获取dom节点的消耗
                        let btnImg = this.$refs.btnImg.offsetWidth;
                        console.log(ev.targetTouches);
                        console.log(ev.changedTouches);
                        if(ev.touches.length == 1) {
                            //滑动时距离浏览器左侧的距离
                            this.moveX = ev.touches[0].clientX;

                            //实时的滑动的距离-起始位置=实时移动的位置
                            this.disX = this.moveX-this.startX;
                            if(this.disX<0 || this.disX == 0) {
                                this.slideEffect = 'transform:translateX(0px)';
                            }else if(this.disX>0){
                                this.slideEffect = 'transform:translateX('+this.disX+'px)';

                                // 最大也只能等于删除按钮宽度 
                                if(this.disX>=btnWidth) {
                                    this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)';
                                }
                            }
                        }
                    },
                    touchEnd:function(ev){
                        ev = ev || event;
                        ev.preventDefault();
                        let btnWidth = this.$refs.remove.offsetWidth;
                        let btnImg = this.$refs.btnImg.offsetWidth;
//                      console.log(ev.changedTouches);
                        if(ev.changedTouches.length == 1) {
                            let endX = ev.changedTouches[0].clientX;
                            this.disX = endX-this.startX;
                            console.log(this.disX,'this.disX')
                            console.log((btnWidth/2),'btnWidth/2');
                            if(this.disX < (btnWidth/2)) {
                                this.slideEffect = 'transform:translateX(0px)';
                            }else {
                                this.slideEffect = "transform:translateX("+(btnWidth-btnImg)+ "px)";
                                //让字段显示出来，或者写你需要的逻辑
                                this.isShow = true
                            }
                        }
                    }
                }
            })
            var vm = new Vue({
                el:'#box',
            })
        script>
    body>
html>

刚开始我也以为touch的三个事件都有targetTouches，touches以及changedTouches对象列表，
其实不然，touchend事件中应该是只有个changedTouches触摸实例列表的，
而且这里说明一下，回调函数的event只是一个普通的object对象，
实际上event中有一个originalEvent属性，这才是真正的touch事件，
这个事件中才存在着上诉三个触摸实例列表，这三个实例存储了触摸事件的位置等等属性，类似于鼠标事件。所以貌似touchend事件中只能用changedTouches！！

希望我们所有的新手小白能一起进步~~！

你可能感兴趣的:(vueJs)

  • vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码 weixin_40008969 vue表格左右拖拽调整列宽
    写在最前最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样这是我最终的实现效果还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们提供的代码，加了亿点点自己所需要的细节。实现原理如上图所示，我们需要将要实
  • vue.config.js 配置 你不讲 wood javascriptvue.js前端webpack开发语言前端框架
    vue.config.js文件是VueCLI项目中的全局配置文件，它允许你以JavaScript的形式来配置构建选项，而不是通过命令行参数或者.vue-clirc的JSON格式。官方文档:https://cli.vuejs.org/zh/config/#全局-cli-配置基础配置publicPath设置构建好的文件被部署后的公共路径。module.exports={publicPath:proce
  • Vue-devtools安装 zhouhao_180
    方法一：1、下载安装包到本地https://github.com/vuejs/vue-devtools2、打开下载好的文件夹，按住shift+鼠标右键,选择在此处打开Powershell窗口3、执行命令npminstall4、执行命令npmrunbuild这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,这里会报错：无法加载背景脚本"buil
  • 回顾vue开发spa（踩坑记录） Just do it
    使用vueJS开发前端页面差不多也有大半多年了。由于项目后台管理页面最早都是使用JQ进行开发的，刚开始使用vue的时候，只能是直接在页面里面引入vueJS框架进行开发，期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了（没有用到组件，只是增强了一下交互，开发更简单便捷）。由于工期和个人习惯问题，期间也留下了很多坑和隐患，比如不少页面是JQ和vue混用，导致后来改功能的时候痛不欲生……所以
  • Vue初步认识与Vue基础指令 amanohina
    Vue.js简介先来谈谈传统网页开发传统开发的缺点：1.DOM操作频繁，代码繁杂2.DOM操作与逻辑代码混合，可维护性差3.不同功能区域书写在一起，可维护性低4.模块之间的依赖关系复杂Vue.js应运而生官网：https://cn.vuejs.orgVue.js核心特性数据驱动视图数据变化会自动更新到对应元素中，无需手动操作DOM，这种行为称作单向数据绑定。单向数据绑定对于输入框等可输入元素，可设
  • Laravel小程序学习日记2018-07-10 Purson
    有那么一个星期没有写日记了，因为答应了Sheldon15号前完成小程序的学习，很多东西都来不及总结，但是由于有vuejs的基础，wepy的使用是比较清楚的。今天为什么记录主要有1个原因，就是我在laravel小程序课程里面提交的修改被合并了，这次不是一两个错字那么简单，是一个小方法，这里截图庆祝一下。投稿小记录在wepy里面异步函数更新数据，一定要在后面加个this.$apply()
  • 根据地址获取经纬度 牧杉-惊蛰 javascript开发语言elementuihtml
    1：安装依赖与引入调用腾讯地图api前需要先去注册并申请key在vue项目中的/public文件夹中的index.html的head中写入安装lodash：npminstall--savelodash安装jsonp：npminstallvue-jsonp--savemain.js引入jsonpimportVuefrom'vue'import{VueJsonp}from'vue-jsonp'Vue.
  • Vue2.0 WYONG_ZQ java
    Vue2.0饿了么ElementUI:http://element.eleme.io/#/zh-CN/component/installation?Vue2.0从环境搭建到发布：http://blog.csdn.net/sinat_17775997/article/details/52788908Vue官方教程及api:http://cn.vuejs.org/v2/guide/ES6入门教程：ht
  • vue-cli Failed to download repo vuejs-templates/webapck: Response code 404 (Not Found) 张静蕾 vuejs开发经验vuejs
    最近一直在学习vue.现在正进入项目实战练习阶段。不过在此过程中，总是为遇见各种各样的问题，报各种各样的错。像上面这个错，一般都是在写命令时写错单词导致的。正确：vueinitwebpack-simple.（注意“.”点，指当前目录。简单初始化一个项目）正确2：veuinitwebapckmy-project(my-project是自己取得项目名字)；在此提醒：千万别写错单词！！！
  • python markdown vuejs前端：如何正确处理多行字符串的缩进问题 南七小僧 网站开发AI技术产品经理人工智能前端pythonvue.js
    有时候，我们需要使用多行字符串配合format格式化函数来生成Markdown文本。例如，我现在开发了一个AI对话机器人，我发送一个txt文件过去，他首先帮我总结整个文件的内容，然后以问答的形式列出10个要点。你的代码可能是这样写的：defbot(text):summary=summary_text_by_gpt(text)qa=get_qa_by_gpt(text)output='''##文本总
  • 深入理解Vue数据响应式 雨溪滩
    Vue数据响应式主要研究的是Vue构造选项中data属性的特性深入响应式官方文档网址：https://cn.vuejs.org/v2/guide/reactivity.html1.首先理解ES6的getter与setter语法obj={//首先创建一个普通对象name:'小欧',age:18,姓名(){returnthis.name;}}console.log(obj.姓名());//小欧//如何
  • 005 vue 简 洁 冬冬 SpringCloud商城项目vue.js前端webpack
    文章目录vue常用指令01vue-helloworld.html02v-if与v-show.html03v-on.html04v-for.html05v-bind.html06v-model.htmlvue的生命周期vue组件化开发思想使用vue脚手架进行模块化开发index.htmlmain.jsApp.vueHello.vueindex.jsVue官方文档https://cn.vuejs.or
  • vue中v-bind绑定属性常遇问题 白意莲
    本文介绍常遇在vue中会有v-bind与属性相关的，如的src路径，和class属性以及style。1.img中src我们知道img标签的src可以跨域请求，可以访问网络中的图片，比如带有http或https地址的图。假设按原理我们有如下代码：varvm=newVue({el:'#box',data:{title:'hivuejs!',logo:'https://cn.vuejs.org/imag
  • day49（vueJS）vue3的生命周期钩子 服务端渲染概念 vue3的组建通信 vue3的ref属性应用 vue3（vuex和pinia的使用） 李中豪前端大佬 vue.js前端javascript前端框架
    vue3的生命周期钩子服务端渲染概念vue3的组建通信vue3的ref属性应用vue3（vuex和pinia的使用）vue3的生命周期钩子常规要点、总结代码演示补充要点、总结服务端渲染概念要点总结vue3的组建通信要点总结父对子传值子对父传值跨层级组件传值vue3的ref属性应用获取DOM节点要点总结代码演示获取组件实例要点总结代码演示vue3（vuex和pinia的使用）vue3中的vuex要点
  • day43（（VueJS）路由（路由的基本配置流程 路由配置表的抽离 导航方式（标签式导航，编程式导航）路由的不同级别）） 李中豪前端大佬 vue.jsjavascript前端前端框架
    一.路由的基本配置方式1.要点总结1)流程（了解）1>在文件夹router中存在一个index.js文件，该文件中进行路由的管理对象的创建和导出2>在入口文件main.js文件中将路由管理对象导入并注册插件（使用应用实例注册插件需要写在挂载容器的语句前面）2)路由模式1>history模式：history:createWebHistory(import.meta.env.BASE_URL);1>>
  • vue、react和小程序的状态管理 LLLuckyGirl~ vue.jsreact.js前端
    vue2的状态管理vuexvuex官网：https://vuex.vuejs.org/vuex安装在vue2中使用vuex的3版本：npmivuex@3在vue3中使用vuex的4版本：npmivuex@4vuex全局配置使用导出vuex的状态配置:index.jsimportVuefrom'vue'importVuexfrom'vuex'exportdefaultnewVuex.store({a
  • vue 开发-组件开发前必读 趣魂 编程前端vue组件
    序言关于vue组件还是非常好用的,真正掌握预计需要一段时间具体可以参考https://cn.vuejs.org/v2/guide/components-registration.html本文主要是描写组件开发过程必然会遇到的几个问题,作为开发组件前的必读材料1.template:必须是单个根元素必须写成{{title}}不能写成{{title}}2.data必须是一个函数data:function
  • Reflect.get() 方法与直接调用 target 对象的获取属性的区别 hzxOnlineOk vue.js
    Vue中的响应性是如何工作的：https://cn.vuejs.org/guide/extras/reactivity-in-depth.htmlReflect.get()方法与直接调用target对象的获取属性之间有一些区别。以下是它们之间的差异：错误处理：直接调用target对象的获取属性操作，如果目标对象不存在或属性不存在，那么会抛出ReferenceError错误。而Reflect.get
  • Vue | （二）Vue组件化编程 | 尚硅谷Vue2.0+Vue3.0全套教程 啦啦右一 #高级技术web开发——前端vue.jsjavascriptecmascript
    文章目录模块与组件、模块化与组件化非单文件组件基本使用关于组件的几个注意点组件的嵌套单文件组件一个.vue文件的组成实例学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p53-p60，博客参考尚硅谷公开笔记，补充记录实操。模块与组件、模块化与组件化⭐️模块理解:向外提供特定功能的js程序,一般就是一个js文件。为什么:js文件很多很复杂。作用:复用js,简化js
  • Vue | （三）使用Vue脚手架（上） | 尚硅谷Vue2.0+Vue3.0全套教程 啦啦右一 #高级技术web开发——前端vue.js前端javascript
    文章目录初始化脚手架创建初体验分析脚手架结构关于render查看默认配置ref与propsref属性props配置项混入插件scoped样式学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p61-p69，博客参考尚硅谷公开笔记，补充记录实操。初始化脚手架创建初体验Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。CLI：commandlineinterf
  • 计算机毕业设计/课程设计系列基于基于Python+Django的个人博客管理系统 大钟聊编程 课程设计
    一、项目介绍计算机毕业设计系列之基于Python、django的个人博客系统项目介绍本项目是一款基于Python的个人博客管理系统。该Python的个人博客管理系基于B/S架构，后端采用Django框架，前端采用Vuejs、jQuery等技术，并结合MySQL数据库。该系统分为管理员、前台用户两种角色：前台用户角色的功能：1）注册登录2）查看博文文章列表3）查看博文详情页4）发布博文5）管理博文6
  • Vue.js购物车示例 飞蛾逐月 前端
    文章目录购物车示例效果准备代码参考文献购物车示例效果准备Vue.jsv2.6.10开发版本：https://cn.vuejs.org/js/vue.js生产版本：https://cn.vuejs.org/js/vue.min.js代码购物车示例[v-cloak]{display:none;}table{border:1pxsolid#e9e9e9;border-collapse:collapse;
  • Vue（一） 静水流深webbb
    在使用Vue时，在浏览器上安装VueDevtools。它允许你在一个更友好的界面中审查和调试Vue应用。通过https://cn.vuejs.org/官方网站下载vue.js文件和vue.min.js文件，并用标签引入。初始vue第一步：准备一个容器第二步：创建一个Vue对象（newVue({})）el：'',指定当前的vue对象操作DOM容器。data：{},定义当前vue对象管理的数据。met
  • vue使用fontawesome 柳正来
    按照fontawesome|Vuejs文档安装和使用vue-fontawesome.$npmi--save@fortawesome/fontawesome-svg-core\npmi--save@fortawesome/free-solid-svg-icons\npmi--save@fortawesome/vue-fontawesome@fortawesome/vue-fontawesome中有更
  • Web前端开发的框架可以应用到哪些地方 一只有头发的程序猿 工作学习web前端JavaScript编程程序员前端开发
    随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以
  • Vue | （一）Vue核心（上） | 尚硅谷Vue2.0+Vue3.0全套教程 啦啦右一 #高级技术web开发——前端vue.js前端javascript
    文章目录Vue简介初识Vue模板语法数据绑定MVVM模型数据代理回顾Object.defineproperty方法何为数据代理Vue中的数据代理事件处理事件的基本使用事件修饰符键盘事件计算属性与监视计算属性（姓名案例）监视属性（天气案例）computedvswatch学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p1-p25，博客参考尚硅谷公开笔记，补充记录实
  • vue watch监听 松果猿 vue.jsjavascript前端
    在Vue.js中，watch是一个对象，用于观察和响应Vue实例上的数据变化。当被监视的属性发生变化时，watch里的回调函数将被调用。（vue2）官方文档：计算属性和侦听器—Vue.js(vuejs.org)下面是一个简单的watch示例：{{message}}exportdefault{data(){return{message:''};},watch:{//监听message属性的变化mes
  • Vue | （一）Vue核心（下） | 尚硅谷Vue2.0+Vue3.0全套教程 啦啦右一 #高级技术web开发——前端vue.jsjavascript前端
    文章目录class与style绑定条件渲染列表渲染基本列表key的原理列表过滤（搜索）列表排序Vue数据监测收集表单数据过滤器内置指令与自定义指令回顾v-text指令v-html指令v-cloak指令v-once指令v-pre指令自定义指令Vue实例生命周期学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p26-p52，博客参考尚硅谷公开笔记，补充记录实操。cl
  • vue3快速上手 Wmenghu 前端vue.js前端javascript
    Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：OnePiece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%,更新
  • vue前端配置代理实现跨域请求 YJ_1101
    跨域的解决方法：设置让服务器允许跨域，使用nginx反向代理服务器实现在config.js中配置config配置官网：https://cli.vuejs.org/config/#devserver-proxydevServer:{host:'0.0.0.0',port:port,proxy:{[process.env.VUE_APP_BASE_API]:{target:`http://localh
  • java解析APK 3213213333332132 javaapklinux解析APK
    解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
  • nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
    　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。 　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种： 　　　一：把ip段放在redis里，写一段lua           二：利用geo传递变量，写一段
  • mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
    timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下：   1.   CURRENT_TIMESTAMP    当要向数据库执行insert操作时，如果有个timestamp字段属性设为   CURRENT_TIMESTAMP，则无论这
  • struts2+spring+hibernate分页显示 171815164 Hibernate
    分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。 　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
  • 构建自己的Wrapper应用 g21121 rap
            我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。           首先，创建项目应用   &nb
  • [简单]工作记录_多线程相关 53873039oycg 多线程
         最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求)     方案一 使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回     缺点       测试发现必须3个接
  • 调试jdk中的源码，查看jdk局部变量 程序员是怎么炼成的 jdk 源码
    转自：http://www.douban.com/note/211369821/    学习jdk源码时使用--   学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。 可惜的是sun提供的jdk并不能查看运行中的局部变量
  • Oracle RAC Failover 详解 aijuans oracle
    Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言， 是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
  • form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScripttomcat浏览器互联网servlet
    原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。 （一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。    对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
  • JS初学者必知的基础 百合不是茶 js函数js入门基础
    JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
  • iBatis的分页分析与详解 bijian1013 javaibatis
            分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
  • 精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle数据库plsql
    /* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
  • 【Linux命令二】文本处理命令awk bit1129 linux命令
    awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。   awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
  • JAVA(ssh2框架)+Flex实现权限控制方案分析 白糖_ java
      目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。 【SSH2权限系统的实现机制】 权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
  • angular.forEach boyitech AngularJSAngularJS APIangular.forEach
    angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
  • java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
    import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
  • action执行2次 Chen.H JavaScriptjspXHTMLcssWebwork
    xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
  • [时空与能量]逆转时空需要消耗大量能源 comsci 能源
            无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越.....         在进行时空穿梭的实验中,消耗超大规模的能源是必然
  • oracle的正则表达式(regular expression)详细介绍 daizj oracle正则表达式
        正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。 正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
  • 报表工具与报表性能的关系 datamachine 报表工具birt报表性能润乾报表
    在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？ 要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。   一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。   2、
  • 初一上学期难记忆单词背诵第一课 dcj3sjt126com wordenglish
    what 什么  your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课   six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
  • 我学过和准备学的各种技术 dcj3sjt126com 技术
    语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html 
  • struts2中token防止重复提交表单 蕃薯耀 重复提交表单struts2中token
    struts2中token防止重复提交表单   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
  • 线性查找二维数组 hao3100590 二维数组
    1.算法描述 有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n)   2.使用到的相关知识： 结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816）   3.使用数组名传递 这个的不便之处很明显，一旦确定就是不能设置列值 //使
  • spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
    spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
  • 学习编程并不难,做到以下几点即可! lampcy javahtml编程语言
    不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
  • 架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
    1.前言。   如题。 2.代码 (1)单表查重复数据,根据a分组   SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询 ， 使用改为le
  • jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquerycssname选择器追加元素查找节点
    最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：   测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
  • 关于EXT tntxia ext
      ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。       ExtJs最开始基于YUI技术，由开发人员Jack
  • 一个MIT计算机博士对数学的思考 xjnine Math
     在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他