使用es6进行一次简单的动态按钮数据获取交换

这篇博客介绍如何通过ES6语法实现一个简单的功能:从URL获取用户登录信息,然后通过AJAX向后端请求数据,根据返回的数据动态改变按钮状态。代码主要分为两部分:一是调用封装好的获取用户信息的函数;二是利用AJAX进行数据交互,通过DOM操作更新按钮的显示状态。
摘要由CSDN通过智能技术生成

主要的内容就是一个简单的按钮,从url获取到用户的登陆信息,然后我们访问这个url从后段拿到数据,进行按钮的改变。
代码也是分为这三段:
1、获取到用户的登陆信息

bridge.utoken((usertoken) => {
    if(usertoken){
    ...
    }
});

公司的大牛们封装好的获取用户信息的函数。可以获取到用户当前的状态,进行判断,进行下一步操作。
2、在if(usertoken){ 里面进行ajax的数据获取:

    $.ajax({
      url: 'https://'
      type: 'GET',
      data: {
        usertoken,
      },
      success: (data) => {
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个使用ES6实现动态悬浮窗组件的示例代码: ```javascript class FloatWindow { constructor({ width, height, backgroundColor }) { this.width = width || 200; this.height = height || 200; this.backgroundColor = backgroundColor || '#FFF'; this.isDragging = false; this.mouseOffsetX = 0; this.mouseOffsetY = 0; this.element = this.createFloatWindow(); this.addEventListeners(); } createFloatWindow() { const floatWindow = document.createElement('div'); floatWindow.style.position = 'absolute'; floatWindow.style.width = `${this.width}px`; floatWindow.style.height = `${this.height}px`; floatWindow.style.backgroundColor = this.backgroundColor; return floatWindow; } addEventListeners() { this.element.addEventListener('mousedown', (event) => { this.isDragging = true; this.mouseOffsetX = event.clientX - this.element.offsetLeft; this.mouseOffsetY = event.clientY - this.element.offsetTop; }); document.addEventListener('mousemove', (event) => { if (this.isDragging) { this.element.style.left = `${event.clientX - this.mouseOffsetX}px`; this.element.style.top = `${event.clientY - this.mouseOffsetY}px`; } }); document.addEventListener('mouseup', () => { this.isDragging = false; }); } show() { document.body.appendChild(this.element); } hide() { document.body.removeChild(this.element); } } ``` 使用该组件时,可以通过传入一个配置对象来设置悬浮窗的大小和背景颜色: ```javascript const floatWindow = new FloatWindow({ width: 300, height: 300, backgroundColor: 'lightblue' }); floatWindow.show(); ``` 然后调用`show()`方法即可在页面中显示悬浮窗,调用`hide()`方法可以将悬浮窗从页面中移除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值