网站怎么做支付宝接口,建设银行的官方网站电话,产品包装设计创意,网页搜题工具回答#xff1a;提供一个思路#xff1a;可以根据热度设置一个倍率#xff0c;然后字体大小和背景透明度根据倍率设置回答#xff1a;使用websocket,热度变化时,数据自动改变回答#xff1a;回答#xff1a;我提供一个我自己写的小demo我猜楼主的问题是不知道如何把颜色亮…回答提供一个思路可以根据热度设置一个倍率然后字体大小和背景透明度根据倍率设置回答使用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占比constvalueDistance 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
