回答：

提供一個思路：可以根據熱度設置一個倍率，然后字體大小和背景透明度根據倍率設置

回答：

使用websocket,熱度變化時,數據自動改變

回答：

回答：

我提供一個我自己寫的小demo

我猜樓主的問題是不知道如何把顏色亮度數字化，我這里使用的是hsl格式的顏色l可以直接表示顏色亮度，顏色亮度直接和value的占比對應

文件排布

.word-box {

width: 300px;

margin: auto;

border: solid 1px #eee;

}

.word-box .word-item {

margin: 15px 0;

padding: 0 20px;

float: left;

vertical-align: middle;

}

const wordBox = document.querySelector('.word-box');

// 定義數據，value 表示文字的熱度

const wordArr = [{

word: 'Alamofire',

value: 30,

}, {

word: 'BLE',

value: 40,

}, {

word: 'CocoalPods',

value: 50,

}, {

word: 'Framework',

value: 60

}, {

word: '開源庫',

value: 100

}];

// 按照value排序

wordArr.sort((a, b) => a.value > b.value ? 1 : -1);

// 獲取最大和最小值，計算單詞的value占比

const

valueDistance = wordArr[wordArr.length - 1].value - wordArr[0].value,

fontSizeRange = [12, 20],

// 顏色范圍，從純黑到半黑(hsl顏色好處理顏色亮度，hex顏色自己去看如何處理顏色亮度)

baseColor = 'hsl(120, 0%, $%)',

// 顏色亮度從高到低

colorRange = [50, 0];

wordArr.map(v => {

// 計算value占比

v.percent = (v.value - wordArr[0].value) / valueDistance;

v.fontSize = (fontSizeRange[0] + (fontSizeRange[1] - fontSizeRange[0]) * v.percent).toFixed(2);

// 占比超過一半 字體加粗

v.fontWeight = v.percent > .5 ? 'bold' : 'normal';

const colorLightness = (colorRange[0] + (colorRange[1] - colorRange[0]) * v.percent).toFixed(2);

// 轉換hsl的顏色

v.color = baseColor.replace('$', colorLightness)

});

const templateHtml = wordArr.reduce((acc, cur) => {

return acc + `

${cur.word}`

}, '');

wordBox.innerHTML = templateHtml

總結

以上是生活随笔為你收集整理的html转word 时 字体颜色,【Web前端问题】文字大小和颜色随着热度改变如何做？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。