AnitaOvO-CSDN博客

原创实现promise封装原生ajax请求

前言为了加深对promise的使用，在此写一下用promise封装原生ajax请求。代码实现function queryData(url) { var p = new Promise(function (reject, reslove) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState != 4) ret.

2021-09-26 19:56:27 842

原创 Ajax实现聊天机器人接口的调用

文章目录前言一、UI布局二、用户内容渲染到聊天窗口三、获取聊天机器人消息1.jquery中的ajax2.调用机器人接口四、将机器人的聊天内容转化为语音播放五、使用回车发送消息总结前言本文介绍如何用ajax调用聊天机器人接口，将信息显示到聊天框中，语音播放机器人消息。一、UI布局聊天框分为头部Header、中间聊天区域、底部Footer消息编辑三大部分。在聊天区域，每条信息都放到每个li中，机器人消息左浮动，用户消息右浮动。这里给出html代码，方便后面理解对标签的操作<body&g

2021-08-06 23:30:23 959

原创用css实现翻转卡片之登录注册

文章目录前言一、翻转卡片思路二、代码实现总结前言本文用css实现登录注册的翻转卡片效果，点击登录翻转到登录卡片，点击注册则翻转到注册卡片。效果如下：提示：以下是本篇文章正文内容，下面案例可供参考一、翻转卡片思路1.首先写两个盒子，分别是login（登录）、signup（注册），将两个盒子用绝对定位放置于中间并重叠。2.先将signup盒子旋转-180deg，接着用backface-visibility:hidden;来隐藏掉翻转到背面的signup盒子。3.添加点击事件，当点击登录时，将

2021-06-21 17:26:25 2534 1

原创 Tab导航栏切换的实现

文章目录前言一、自定义属性1.自定义属性的目的2.自定义属性的操作3.规范二、导航栏的实现1.静态样式2.JS实现交互总结前言Tab导航栏切换在网页场景中十分常见，本文将介绍如何用js来实现交互的导航栏。分析：1.当鼠标点击上面相应的选项卡（tab），下面盒子的内容跟随变化2.点击某一个选项，当前这一个底色会变成红色，字体变白色，其余不变。3.下面的模块显示内容需要和上面选项卡一一对应，互相匹配。思路：可以给选项卡添加自定义属性（索引号index），属性值从0开始编号。当点击某个选项卡，下

2021-06-19 11:18:58 6726 2

原创用css实现轮播标题文字

文章目录一、实现思路二、代码总结本文介绍了用css和js来实现一个具有轮播效果的标题，最终结果如下：一、实现思路css部分：将要轮播的文字赋予绝对定位，并且对盒子增加移除隐藏，overflow:hidden。js部分：1.设置一个定时器setInterval函数，每2000毫秒执行一次函数内容，（setInterval和setTimeOut是有区别的，前者是在间隔指定时间后执行，后者是只会执行一次）2.在函数中获取span[data-show],span[data-up]标签元素（da

2021-06-18 17:16:57 2030

原创 vue+ElementUI日期选择器实现禁用多时间段

文章目录前言一、引入elementui1.npm下载插件2.引入elementUI2.1 全局引用2.2 按需引用，需要下载babel2.3引入ElementUI的日期选择器DatePicker二、实现多时间段禁用总结前言本文将讲解如何在vue中使用elementui的日期选择器，如何同时禁用多个时间段，以及终止日期不能选择起始日期之前的日期。这里以订房选择日期为例，效果如下。1.选择起始日期（已被预订的日期不能选）:2.选择终止日期（入住日期是6/11,则退房日期不能选11号之前）：一、引

2021-06-06 15:32:19 3352

原创 css实现八种垂直居中方式

文章目录一、使用flex布局实现二、margin+transform实现三、绝对定位+translate四、绝对定位+margin：auto五、grid网格布局实现六、使用table-cell实现七、inline-block+vertical-align实现八、绝对定位+负margin值总结先给出html，下面用八种方式来实现垂直居中。<body> <div class="box"> <div class="contain">

2021-05-25 16:45:10 338

原创用vue实现消息弹框

一、弹框组件1.首先需要写一个弹框组件model.vue，包括遮罩层及弹框本身。//html部分<template> <div class="model"> <div class="mask">123</div> <div class="model-dialog"> <div class="model-header"> <span>提示</span>

2021-05-24 16:56:15 14072

原创使用原生js实现吸顶功能

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例

2021-05-12 19:52:27 1981

原创 css绘制三角形及应用

文章目录一、绘制简单三角形二、直角三角形的绘制（非等腰）三、对话框的实现总结一、绘制简单三角形首先，当我们对一个没有固定宽高的盒子设置四个不同颜色的边框时，会出现如下图所示效果。代码如下：<style> .box { width: 0; height: 0; border-top: 100px solid pink; border-left: 100px solid gre

2021-04-02 16:17:35 313

原创使用MapReduce框架编写wordcount程序，统计某文本中每个单词出现的次数

文章目录前言一、设计思路二、程序源码1.自定义Mapper内部类2.自定义Reducer内部类3.自定义WordCount主类三、程序运行1.导出jar包并运行2.直接在eclipse中运行四、运行jar包时可能出现的问题前言输入的内容如下文件，要求计算出文件中单词的出现次数，并按照单词的字母顺序进行排序，每个单词和其出现次数占一行，单词与出现次数之间有间隔：text.txt文件内容如下：hello wordhello hadoopbye hadoop要求输出结果：bye 1ha

2021-03-30 13:54:05 3109

原创 vue-cli3配置vue.config.js与跨域处理

文章目录前言1.基本配置2.跨域总结前言通过vue-cli3脚手架创建的项目中没有vue.config.js文件，因此我们可以在package.json同级目录下新建一个vue.config.js文件。1.基本配置文件格式应该为：// vue.config.jsmodule.exports = { // 选项...}我的配置：module.exports = { outputDir: 'dist', //build输出目录 assetsDir: 'assets', //

2021-03-28 15:21:01 794

原创 Vue学习之状态管理—Vuex的详细使用

文章目录前言一、安装Vuex二、核心概念1.store2.mutations3.mapState4.getter5.module总结前言我们知道，父组件通过prop向子组件传递数据，子组件通过定义事件向父组件传递数据。但假若遇到多个组件访问统一数据时，就需要一个全局的状态管理方案vuex来解决。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到了调式工具vue-devTools中

2021-03-06 23:33:44 361

Anita的博客