云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM

news2024/11/20 7:29:32

著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。

玉兔主题元素绘制

成本最低的绘制方式是使用纯CSS，不依赖任何图片和三方库，首先创建绘制容器：

<div id="rabbit_box">  
    
  
  
</div>

由于是小挂件，我们首先将容器固定在右下角：

#rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

这里加了一层filter滤镜，可以让玉兔更加立体。

考虑到复用性和可移植性，将主题元素动态添加到容器中：

function rabbit_init(){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
     
  
}  
  
rabbit_init()

这里玉兔元素由八个小组件构成，分别是头部，四肢，四爪，两只耳朵，眼睛，尾巴以及嘴。

随后设置CSS样式：

.rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }

兔子身体元素通过border-radius来获得圆润的曲线，同时使用transform旋转元素得到一个适合的角度。最后通过box-shadow属性来设置颜色，颜色可以自定义，如果没有自定义则使用默认值#D2DAEE，注意旋转角度需要指定单位：deg。

接着绘制头部：

.rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }

这里通过::before 和 ::after 伪元素在兔子头部元素的前面或后面插入内容，头部前面绘制兔嘴，后面则插入兔子眼睛，之所以这样控制，是因为可以灵活的使用box-shadow填充颜色。

接着绘制耳朵：

.rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }

@-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }

这里通过-webkit-animation属性让兔子左右耳在3秒内进行来回摆动，达到一种动态效果，注意左耳内侧颜色固定为：#F3E3DE，同时动画会影响元素的布局，需要注意元素的宽高。

最后就是四肢和尾巴：

.rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }

这里四肢和四爪的颜色应该有差异，四肢颜色可以自定义，四爪固定为白色，以达到“四蹄踏雪”的效果。

接着改造初始化函数，使其可以动态更改颜色：

function rabbit_init(color=null,pos=null){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
}  
  
rabbit_init("pink")

最终效果：

开源发布

现在我们将这个开源特效打包上线，首先创建项目目录：

mkdir rabbit

随后将特效的样式CSS代码以及JS代码分别抽离出来：rabbit.css:

.rabbit {  
    position: relative;  
  }  
  .rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }  
  .rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }  
  .rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }  
  .rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }  
    
  @-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  
  #rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

rabbit.js代码：

(function (name, context, fn) {  
    if (typeof module != 'undefined' && module.exports) {  
        // Node 环境  
        module.exports = fn();  
    } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])) {  
        // Require.js 或 Sea.js 环境  
        define(fn);  
    } else {  
        // client 环境  
        context[name] = fn();  
    }  
})('rabbit_init', this, function () {  
    return function (color=null,pos=null) {  
          
  
        var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
  
    }  
});

保存在项目的lib目录。

首先将项目提交到Github: https://github.com/zcxey2911/rabbit

随后运行命令填写NPM配置：

npm init

entry point 配置项填写你的入口文件：

entry point: ./lib/rabbit.js

登录NPM账号，随后发布：

npm login  
npm publish

登录之前，最好将切换回默认源，否则无法登录：

npm config set registry=https://registry.npmjs.com

发布成功后，查看发布内容：https://www.npmjs.com/package/rabbit-widget

开源库引入和使用

首先需要引入模块，可以使用 CDN 直接引入或者通过 NPM 包的形式安装。

直接引入：

<!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css -->  
<!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js -->  
  
<link  
  rel="stylesheet"  
  href="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css"  
/>  
  
<div id="rabbit_box">  
</div>  
  
<script>  
  
function init_rabbit(){  
  
 rabbit_init("pink","20%");  // 粉色 高度20%  
  
 //rabbit_init(); //默认颜色 默认位置  
  
}  
  
</script>  
  
  
<script  
  async  
  onload="init_rabbit()"  
  src="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js"  
></script>

NPM 包的形式安装：

// npm install --save rabbit-widget  
import 'rabbit-widget/lib/rabbit.css';  
  
var rabbit_init = require('rabbit-widget');  
  
rabbit_init();

如果使用NPM导入模块的形式引入，请确保页面加载完毕之后执行再执行rabbit_init();，否则会报错：Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)。

这里以Vue.js3.0组件为例子：

<template>  
  <a-layout class="layout">  
    <a-layout-header>  
      <div class="logo" />  
  
      <ad_header />  
        
  
  
    </a-layout-header>  
    <a-layout-content style="padding: 0 50px">  
      <a-breadcrumb style="margin: 16px 0">  
        <a-breadcrumb-item>广告平台</a-breadcrumb-item>  
        <a-breadcrumb-item>首页</a-breadcrumb-item>  
  
      </a-breadcrumb>  
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">  
  
  
        这里是首页  
  
  
        <div id="rabbit_box"></div>  
  
  
    </div>  
    </a-layout-content>  
    <a-layout-footer style="text-align: center">  
      在线广告平台  
    </a-layout-footer>  
  </a-layout>  
</template>  
  
<script>  
  
import ad_header from './ad_header';  
  
import 'rabbit-widget/lib/rabbit.css';  
  
var rabbit_init = require('rabbit-widget');  
  
  
export default {  
 data() {  
    return {  
  
       
  
    }  
  },  
  //声明子组件  
  components:{  
  
    'ad_header':ad_header  
  
  
  },  
  methods:{  
  
     
  
  
  },  
  created(){  
  
  
    this.$nextTick(() => {  
    console.log("页面加载完啦~")  
  
    rabbit_init();  
})  
  
  
  }  
  
}  
</script>  
<style>  
.site-layout-content {  
  min-height: 280px;  
  padding: 24px;  
  background: #fff;  
}  
#components-layout-demo-top .logo {  
  float: left;  
  width: 120px;  
  height: 31px;  
  margin: 16px 24px 16px 0;  
  background: rgba(255, 255, 255, 0.3);  
}  
.ant-row-rtl #components-layout-demo-top .logo {  
  float: right;  
  margin: 16px 0 16px 24px;  
}  
  
[data-theme='dark'] .site-layout-content {  
  background: #141414;  
}  
</style>

项目中引入效果：

结语

奉上项目代码，与众亲同飨:https://github.com/zcxey2911/rabbit https://www.npmjs.com/package/rabbit-widget ，最后祝各位乡亲祥瑞玉兔，人机平安，愿诸君2023年武运昌隆，前端一统。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/159404.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据降维-MDS 算法

数据降维-MDS 算法

数据降维-MDS 算法 文章目录数据降维-MDS 算法算法概述算法步骤算法证明代码参考算法概述 MDS的初衷是将图结构中的距离在空间的一种表示。 例如&#xff0c;已知几个城市的距离&#xff0c;但是不知道城市的坐标&#xff0c;那么MDS就能通过距离矩阵转换成空间坐标向量来近似…
阅读更多...
mock的基本使用

mock的基本使用

mock的基本使用官网文档mockjs是用来模拟产生一些虚拟的数据&#xff0c;可以让前端在后端接口还没有开发出来时独立开发&#xff0c;mockjs可以拦截ajax请求&#xff0c;返回设定好的数据。注意&#xff1a;mock&#xff08;模拟数据&#xff09;数据需要使用到mockjs模块&…
阅读更多...
如何用更好的创意引发卖家和消费者的共鸣？

如何用更好的创意引发卖家和消费者的共鸣？

我们知道&#xff0c;近年来国家的政策越来越向创新型的企业发展倾斜&#xff0c;因此各行各业都响应政策&#xff0c;做创新型高质量发展&#xff0c;跨境电商作为疫情下应运而生的产物&#xff0c;其本身就带有创新型发展的概念&#xff0c;同时&#xff0c;面对着2022年许多…
阅读更多...
Java程序的运行过程（执行流程）分析

Java程序的运行过程（执行流程）分析

万事知其然&#xff0c;要知其所以然&#xff0c;所以本节带大家来详细了解一下 Java 程序的执行过程。从《使用记事本编写运行Java程序》一节的案例可以看出&#xff0c;Java 程序的运行必须经过编写、编译和运行 3 个步骤。编写&#xff1a;是指在 Java 开发环境中进行程序代…
阅读更多...
回溯法--图的m着色问题

回溯法--图的m着色问题

问题描述给定无向连通图和m种不同的颜色&#xff0c;用这些颜色为图G的各个顶点着色&#xff0c;每个顶点有一种颜色是否有一种着色方法&#xff1f;使得图G中每条边的两个顶点有不同的颜色这个问题就是图的m可着色判定问题色数&#xff1a;如果有一个图最少需要m种颜色才能使得…
阅读更多...
国医大师体验照“镜”测“三高”，深兰科技AI产品秒出健康报告

国医大师体验照“镜”测“三高”，深兰科技AI产品秒出健康报告

“请把脸缓慢往左转。” “请将脸回正&#xff0c;请将脸缓慢往右转。” “请放松心情&#xff0c;期待3D面部的生成结果。” 跟随提示音&#xff0c;刚刚被聘任为深兰科技科学院专家委员会医学专家的国医大师严世芸教授饶有兴致地体验着深兰科技AI生理健康检测仪-扁鹊。等待一…
阅读更多...
【位图】面对海量数据，如何压缩空间？定位数据？

【位图】面对海量数据，如何压缩空间？定位数据？

目录 一、腾讯面试题 二、解决办法——位图 2.1、那么什么是位图&#xff1f; 三、位图的模拟实现 3.1、位图的构造 3.2、存放数据 3.3、检测数据是否存在 3.4、设置某个数据的对应位为0 四、位图模拟代码&#xff08;完整&#xff09; 一、腾讯面试题 给40亿个不重复…
阅读更多...
Authing 入选 2022 中国产业数字化领军企业

Authing 入选 2022 中国产业数字化领军企业

1 月 10 日&#xff0c;产业互联网第一媒体产业家联合数字化报、IT 桔子正式发布了【中国产业数字化领军企业榜单】&#xff0c;评选出 16 个互联网赛道中的领军企业。作为身份认证与访问管理领跑者&#xff0c;Authing 凭借在 SaaS 领域的技术创新与产品优势&#xff0c;成功入…
阅读更多...
6.4、域名系统 DNS

6.4、域名系统 DNS

1、DNS的作用 如下所示&#xff0c;因特网中的某台主机要访问某台 Web 服务器 只需在用户主机中运行某个游览器软件&#xff0c;在其地址栏中输入要访问的 Web 服务器的域名&#xff0c;并按下回车键即可访问到 Web 服务器所提供的内容 我们在用户主机中使用 ping 命令测试 We…
阅读更多...
【小练】day1

【小练】day1

day1 选择题 1. 以下for循环的执行次数是&#xff08;&#xff09;。 for(x0,y0;(y123)&&(x<4););A 是无限循环 B 循环次数不定 C 4 D 3 本题主要考察for for(初始化部分&#xff1b;条件判断部分&#xff1b;调整部分) 初始化部分只执行一次。 &&&a…
阅读更多...
大数据分析案例-基于多元线性回归算法构建广告投放收益模型

大数据分析案例-基于多元线性回归算法构建广告投放收益模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
走好这三步，不再掉进云上安全的沟里！

走好这三步，不再掉进云上安全的沟里！

序言一直以来&#xff0c;公有云安全是横亘在广大用户面前的一道鸿沟。云安全&#xff08;Cloud Security&#xff09;是指用于控制云计算的安全性、合规性和其他使用风险的过程、机制和服务。公有云提供商们都强调安全是其最高优先级工作&#xff0c;动辄就发布上百页的云上安…
阅读更多...
谁还没个技术呢~PYTHON制作观看软件

谁还没个技术呢~PYTHON制作观看软件

前言 大家早好、午好、晚好吖 ❤ ~ 以前没钱时&#xff0c;我是这样嘚&#xff1a; 朋友说好一生一起走&#xff0c;账号先借我来耍耍 现在没钱时&#xff0c;我是这样嘚&#xff1a; 涨价就涨价&#xff0c;怎么还搞搞限制账号登录这一出呢~ 这年头~谁还没点技术不是,看我…
阅读更多...
复盘一下slam中常用的几种点云类型

复盘一下slam中常用的几种点云类型

使用livox雷达常涉及至少3种点云格式&#xff0c;一个是livox官方定义的custom格式&#xff0c;另外两个就是激光、视觉常用的pcl类型和ros类型。之前总结过Livox雷达驱动程序发布点云格式CustomMsg和pcl::PointXYZI、pcl::PointXYZINormal之间的关系&#xff0c;现在再来复盘一…
阅读更多...
【TypeScript】TS进阶-泛型（八）

【TypeScript】TS进阶-泛型（八）

&#x1f431;个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门到…
阅读更多...
【Linux】工具使用

【Linux】工具使用

文章目录一、Linux 软件包管理器 yum二、 Linux开发工具&#xff08;1&#xff09; Linux编辑器-vim使用&#xff08;2&#xff09;简单vim配置三、Linux编译器-gcc/g使用四、动态库和静态库五、Linux调试器-gdb使用六、Linux项目自动化构建工具-make/Makefile(1)make/Makefile…
阅读更多...
如何才能精通 Redis？

如何才能精通 Redis？

为什么我要讲 Redis&#xff1f; 已经出过这么多主题的书籍和课程了&#xff0c;这次我为什么要选择 Redis 这个主题呢&#xff1f; 那自然是因为 Redis 是我们实际开发中不可或缺的组件之一&#xff0c;也是目前全球最流行的 KV 数据库。相信小伙伴们在工作中也会频繁接触到…
阅读更多...
【入门篇】2 # 复杂度分析（下）：浅析最好、最坏、平均、均摊时间复杂度

【入门篇】2 # 复杂度分析（下）：浅析最好、最坏、平均、均摊时间复杂度

说明 【数据结构与算法之美】专栏学习笔记。 为什么引入这些时间复杂度 先看下面代码 // n 表示数组 array 的长度 int find(int[] array, int n, int x) {int i 0;int pos -1;for (; i < n; i) {if (array[i] x) {pos i;break;}}return pos; }上面代码中如果没有 …
阅读更多...
Redis序列化和java存入Redis数据序列化反序列化总结

Redis序列化和java存入Redis数据序列化反序列化总结

背景&#xff1a; 最近考虑java代码数据在保存redis时&#xff0c;通常要配置序列化&#xff0c;才能保存到redis中&#xff0c;然而我们知道Redis中也有序列化&#xff08;RDB和AoF两种形式&#xff09;&#xff0c;有点混淆总结一下。 java中数据保存redis过程序列化的原因是…
阅读更多...
图解：什么是二叉查找树？

图解：什么是二叉查找树？

文章目录1. 二叉查找树的概念2. 二叉查找树的实现&#x1f351; 定义节点&#x1f351; 函数接口总览&#x1f351; 构造函数&#x1f351; 拷贝构造&#x1f351; 赋值重载&#x1f351; 析构函数&#x1f351; 查找操作&#x1f345; 动图演示&#x1f345; 非递归实现&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023