angular2.x 实现滑动拼图验证码功能

angular2.x 实现滑动拼图验证码功能

滑动拼图验证码功能请参考原文链接,感谢作者分享!
- http://www.cnblogs.com/huanglei-/p/8568405.html
- 图片链接和图片上传


下面举例说明在angular2版本及以上版本怎么实现此功能。

引入js

首先将封装好的js插件引入到项目目录下
这里写图片描述

配置js

全局配置
第一种方法是:找到配置文件 angular-cli.json
这里写图片描述
配置里边的script
这里写图片描述
第二种方法:直接在index.html中引入即可
这里写图片描述

引入css文件(全局样式)

直接引入index中的header 标签内即可
这里写图片描述

组件内使用滑块验证码功能

在login 组件内使用
这里写图片描述
在login.html中写入html片段
这里写图片描述
注意:因为在login.html中可能有好几个页面(首页/登录/忘记密码)此时不要通过*ngIf 或者 [hidden] 属性进行现实或隐藏。此处用的是 display:none和display :block 来控制的,以便滑块验证码初始化的时候可以找到元素。

ts中引用

先在login.component.ts中引入
这里写图片描述
封装加载的方法:这里我是在页面初始化就加载了,但是可能所在元素是display:none 状态,所以用了一个三元运算符进行取值,以便找到需要初始化的dom
这里写图片描述
初始化加载 备注:全局只需加载一次即可。
这里写图片描述

示意图 :鼠标划过的时候 显示图片。
这里写图片描述
这里写图片描述

以上就是我的使用心得。在原来基础上做了部分修改,原始的例子和代码请参考原创地址!

http://www.cnblogs.com/huanglei-/p/8568405.html

下面是本例的js css 和 ts

slidingCode.js

(function (window) {
    const l = 42, // 滑块边长
        r = 10, // 滑块半径
        w = 310, // canvas宽度
        h = 155, // canvas高度
        PI = Math.PI
    const L = l + r * 2 // 滑块实际边长

    function getRandomNumberByRange(start, end) {
        return Math.round(Math.random() * (end - start) + start)
    }

    function createCanvas(width, height) {
        const canvas = createElement('canvas')
        canvas.width = width
        canvas.height = height
        return canvas
    }

    function createImg(onload) {
        const img = createElement('img')
        img.crossOrigin = "Anonymous"
        img.onload = onload
        img.onerror = () => {
            img.src = getRandomImg()
        }
        img.src = getRandomImg()
        return img
    }

    function createElement(tagName) {
        return document.createElement(tagName)
    }

    function addClass(tag, className) {
        tag.classList.add(className)
    }

    function removeClass(tag, className) {
        tag.classList.remove(className)
    }

    function getRandomImg() {
        return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 1084)
    }

    function draw(ctx, operation, x, y) {
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(x + l / 2, y)
        ctx.arc(x + l / 2, y - r + 2, r, 0, 2 * PI)
        ctx.lineTo(
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Angular Intro.js 是一个 AngularJS 模块,用于集成 Intro.js 库,以提供网站或应用程序的新手引导和演示。下面是使用步骤: 1. 安装 Angular Intro.js:通过 npm 安装 Angular Intro.js 模块。 ``` npm install angular-intro.js --save ``` 2. 引入 Intro.js 库:在项目中引入 Intro.js 库,可以通过 npm 安装或直接使用 CDN 引入。 ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script> ``` 3. 引入 Angular Intro.js 模块:在 AngularJS 应用程序中引入 Angular Intro.js 模块。 ``` angular.module('myApp', ['angular-intro']); ``` 4. 在 HTML 中使用:在 HTML 中使用指令来添加新手引导和演示。 ``` <div introjs intro-options="options"> <p>这是一个新手引导示例</p> <button ng-click="showStep2()">下一步</button> </div> ``` 上面的代码中,`introjs` 指令告诉 Angular Intro.js 应该在这个元素上启用引导,`intro-options` 属性包含 Intro.js 配置选项,`showStep2()` 是一个 AngularJS 控制器中的函数,用于显示下一个步骤。 5. 在控制器中配置选项和方法:在 AngularJS 控制器中配置 Intro.js 选项和方法。 ``` angular.module('myApp').controller('myCtrl', function($scope) { $scope.options = { steps: [ { element: document.querySelector('#step1'), intro: '这是第一步' }, { element: document.querySelector('#step2'), intro: '这是第二步' } ] }; $scope.showStep2 = function() { introJs().goToStep(2).start(); }; }); ``` 上面的代码中,`steps` 选项包含 Intro.js 步骤对象,每个步骤是一个包含 `element` 和 `intro` 属性的对象。`showStep2()` 函数使用 Intro.js 方法来显示第二步。 以上是 Angular Intro.js 的简单使用方法,可以根据需要进行配置和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值