qqlevel

仿QQ等级计算方法

{
  👑: 64,
  🌞: 16,
  🌙: 4,
  ⭐: 1
}

How to use?

npm i qqlevel

import QQlevel from 'qqlevel';

// 简单使用

const level = new QQlevel();
level.setLevel(48);
const mylevel = level.getLevel();
console.log(mylevel);
// { level: 48, crown: 0, sun: 3, moon: 0, star: 0 }

const level = new QQlevel(25);
const mylevel = level.getLevel();
console.log(mylevel);
// { level: 25, crown: 0, sun: 1, moon: 2, star: 1 }

Default configuration 默认配置

{
  maxLevelLimit: number = 255;
  minLevelLimit: number = 0;
  icon: {
    crown: string;
    sun: string;
    moon: string;
    star: string;
  } = {
    crown: './assets/crown.svg',
    sun: './assets/sun.svg',
    moon: './assets/moon.svg',
    star: './assets/star.svg',
  };
  iconString: {
    crown: string;
    sun: string;
    moon: string;
    star: string;
  } = {
    crown: '👑',
    sun: '🌞',
    moon: '🌙',
    star: '⭐',
  };
  iconLevel: {
    crown: number;
    sun: number;
    moon: number;
    star: number;    
  } = {
    crown: 64,
    sun: 16,
    moon: 4,
    star: 1,
  };
  iconStyle: string = `width: 1em;height: 1em;`;
  iconWrapStyle: string = `display: flex;align-items: center;font-szie: 12px;`;
};

Modify configuration 修改配置

• Full revision 全量修改

import QQlevel from 'qqlevel';
const config = {
  maxLevelLimit: number = xxx;
  minLevelLimit: number = xxx;
  icon: {
    crown: string;
    sun: string;
    moon: string;
    star: string;
  } = {
    crown: 'xxx',
    sun: 'xxx',
    moon: 'xxx',
    star: 'xxx',
  };
  iconString: {
    crown: string;
    sun: string;
    moon: string;
    star: string;
  } = {
    crown: '👑',
    sun: '🌞',
    moon: '🌙',
    star: '⭐',
  };
  iconLevel: {
    crown: number;
    sun: number;
    moon: number;
    star: number;    
  } = {
    crown: 64,
    sun: 16,
    moon: 4,
    star: 1,
  };
  iconStyle: string = `xxx`;
  iconWrapStyle: string = `xxx`;
}

const level = new QQlevel(48, config);
// or 或者
const level = new QQlevel();
level.setConfig(config);
level.setLevel(48);

• Partial modification 部分修改

import QQlevel from 'qqlevel';

const level = new QQlevel();

// 配置icon 字符串
const iconString: {
  crown: string;
  sun: string;
  moon: string;
  star: string;
} = {
  crown: '',
  sun: '',
  moon: '',
  star: '',
};
level.setIconString(iconString);

// 配置icon 地址
const icon: {
  crown: string;
  sun: string;
  moon: string;
  star: string;
} = {
  crown: '',
  sun: '',
  moon: '',
  star: '',
};
level.setIcon(icon);

// 配置icon 样式
const iconStyle: string = `
  with: 1em;
  height: 1em;
`;
level.setIconStyle(iconStyle);

// 追加icon 样式
const iconStyleMore: string = `
  font-size: 16px;
`;
level.addIconStyle(iconStyleMore);


// 配置icon 容器样式
const iconWrapStyle: string = `
  display: flex;
`;
level.setIconWrapStyle(iconWrapStyle);

// 追加icon 容器样式
const iconWrapStyleMore: string = `
  align-items: center;
`;
level.setIconWrapStyle(iconWrapStyleMore);

// 配置最大等级和最小等级限制
const range: {
  max: number,
  min: number,
} = {
  max: 255,
  min: 0,
};
level.setLevelLimit(range);

// 配置icon所代表的的等级
const = iconLevel: {
  crown: number;
  sun: number;
  moon: number;
  star: number;    
} = {
  crown: 64,
  sun: 16,
  moon: 4,
  star: 1,
};
level.setIconLevel(iconLevel):

Get result 获取结果

  const level = new QQlevel(100);
  const mylevel = level.getLevel();
  console.log(mylevel);
  // { level: 100, crown: 1, sun: 2, moon: 1, star: 0 }

  // or 或者

  const level = new QQlevel();
  level.setLevel(256);
  const mylevel = level.getLevel();
  console.log(mylevel); 
  // { level: 256, crown: 4, sun: 0, moon: 0, star: 0 }

Output 输出

// 输出HTML
const level = new QQlevel(16);
const levelHTML = level.outputLevelHTML();
// 或者
const levelHTML = level.outputLevelHTML(16);
console.log(levelHTML);
/*
<div style="display: flex;align-items: center;font-szie: 12px;">
  <img src="./src/assets/sun.svg" style="width: 1em;height: 1em;">
</div>
*/



// 输出字符
const level = new QQlevel(254);
const levelString = level.outputLevelString();
// 或者
const levelHTML = level.outputLevelString(254);
console.log(levelString);
// 👑👑👑🌞🌞🌞🌙🌙🌙⭐⭐

等级对照表