整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>顏色漸變的文字</title>
<script language="javascript">
function Delta(sHex1,sHex2,iNum){
//計算每個字的變化量
var iHex1 = parseInt("0x"+sHex1);
var iHex2 = parseInt("0x"+sHex2);
return (iHex2 - iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){
if(sText.length<=1){
//如果只有一個字符，漸變無從談起，直接輸出并返回
document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
return;
}
//RGB三色分離，分別獲取變化的小量delta
var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
var sColorR = parseInt("0x"+sColor1.substring(0,2));
var sColorG = parseInt("0x"+sColor1.substring(2,4));
var sColorB = parseInt("0x"+sColor1.substring(4,6));
for(var i=0;i<sText.length;i++){
document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
/*每輸出一個字符，顏色的三個分量都相應的變化
當字符輸出完成時，正好由sColor1變成sColor2*/
sColorR += fDeltaR;
sColorG += fDeltaG;
sColorB += fDeltaB;
}
}
Colorful("春節(Spring Festival)中國民間最隆重最富有特色的傳統節日，它標志農歷舊的一年結束和新的一年的開始 。春節一般指除夕和正月初一 。但在民間，傳統意義上的春節是指從臘月初八的臘祭或臘月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一為高潮。在春節期間，我國的漢族和很多少數民族都要舉行各種活動以示慶祝。這些活動均以祭祀神佛、祭奠祖先、除舊布新、迎禧接福、祈求豐年為主要內容。活動豐富多彩，帶有濃郁的民族特色。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>用時直接調用函數Colorful(),輸入文字以及起始顏色和終止顏色值。
欲善其事，必先利其器。在我們開發的過程中，一些“輪子”、工具能夠幫助我們應對項目中切實的需求，提升開發的效率。所以，日常收集一些庫或工具就顯得尤為重要了。畢竟，遇見需求/問題的時候，能做到“家有余糧，心中不慌。”
在本期中，我依然精選了一些近期收羅的開源庫、工具以及我的微博上 #每日一Pen# 話題中大家轉發較多的編程靈感，希望你們有所收獲。
1. TypeLighter.js
TypeLighter.js 是一款輕量級（Gzip 壓縮后僅 1.04KB）的 JS 庫，能夠幫助你實現打字機效果。它提供了 8 個屬性（寫入速度、寫入/刪除延遲等）供你微調，更改 data 屬性即可更改其值。 ????
項目地址：
https://github.com/EdernClemente/TypeLighterJS
2.Clendar
Clendar 是一款輕量級、無依賴的 JS 日歷組件。它具備簡潔的 API，適用于 React、Vue、Angular 等框架。 ????
項目地址：
https://github.com/simbawus/calendar
3.Lax.js
Lax.js 是一款輕量的 Vanilla JS 插件，當頁面滾動時，創建流暢、炫酷的動畫效果，讓你的網站“動”起來。
項目地址：
https://github.com/alexfoxy/laxxx
4.HIUI
HIUI 是由小米開源的面向中后臺系統的前端組件庫。它以用戶體驗一致性為出發點，提供類型全面的組件庫和頁面模板，幫助開發人員快速實現交互一致、界面美觀的界面開發。 ?
項目地址：
https://github.com/XiaoMi/hiui
5.awesome-coding-js
這個倉庫整合了大量算法和數據結構的 JavaScript 實現，涉及經典排序算法、二叉樹、鏈表、字符串等內容，鞏固基礎的朋友，可以關注下。
項目地址：
https://github.com/ConardLi/awesome-coding-js
6.JS-Dev-Reads
專為 JS 開發者匯總的閱讀清單，涉及圖書推薦、文章精選等內容。
項目地址：
https://github.com/twhite96/js-dev-reads
1.JetCache
JetCache 是由阿里巴巴開源的通用緩存訪問框架，它提供了統一的 API 和注解來簡化緩存的使用。如果你了解 SpringCache 的話，那么更容易接受它，因為它比 SpringCache 更強大。它支持 TTL、兩級緩存、分布式緩存自動刷新、異步 Cache API，還可以手動去操作緩存實例。
項目地址：
https://github.com/alibaba/jetcache
2.architect-awesome
一套非常全面的后端架構師技術圖譜，從數據結構與算法著手，帶你學習后端技術的方方面面。目前 GitHub 上已有 3.7W Star，值得推薦。
項目地址：
https://github.com/xingshaocheng/architect-awesome
3.Bistoury
Bistoury 是去哪兒網開源的一個對應用透明，無侵入的 Java 應用診斷工具。它提供了在線 Debug、線程級 CPU 監控等諸多功能，幫助開發人員直接通過日志、內存、線程、類信息、調試、機器和系統屬性等各個方面對應用進行診斷，提升開發人員的診斷效率和診斷能力。
項目地址：
https://github.com/qunarcorp/bistoury
4.Python-Crawler-Tutorial-Starts-From-Zero
這是 Python 從零到一爬蟲系列教程。教程涉及爬蟲預備知識、請求分析流程、Requests 模塊的使用等基礎知識部分，以及 3 個項目實例內容，幫助你零到一學會 Python 爬蟲。
項目地址：
https://github.com/Kr1s77/Python-crawler-tutorial-starts-from-zero
5.VHR
VHR（微人事）是一個由 SpringBoot+Vue 開發的人力資源管理系統。項目采用前后端分離，并提供了詳細的開發文檔，供參考與學習。
項目地址：
https://github.com/lenve/vhr
1.Morec
Morec 是一個精美的 Flutter 版電影客戶端。它利用了豆瓣現有的 API，實現了具備電影搜索、電影榜單、詳情介紹等完整功能的電影展示，或許這個項目能給你一些參考。 ?
項目地址：
https://github.com/Mayandev/morec
2.PickerView
這是一個非常好用的 Android PickerView 庫，內部提供 2 種常用類型的 Picker.它支持擴展自定義 Picker、自定義彈窗，也可作為 View 的非彈窗場景。
項目地址：
https://github.com/jaaksi/pickerview
3.Xpush
Xpush 是一款輕量級、可插拔的 Android 消息推送框架。它集成便捷，提供了一鍵集成推送（極光推送、友盟推送、華為、小米推送等），它具備豐富的功能（支持推送相關的注冊、注銷，標簽的增加、刪除、獲取等操作），還支持統一的消息訂閱、增加消息過濾器、支持 Android 9.0.
項目地址：
https://github.com/xuexiangjys/XPush
1.React Image Crop
React Image Crop 是一款響應式圖像剪裁工具，它具備輕量、無依賴、響應式、支持觸控等特性。
項目地址：
https://github.com/DominicTobias/react-image-crop
2.Chrome 插件英雄榜
這個倉庫匯集了眾多優秀、實用的 Chrome 插件，并提供了詳盡的說明。或許，你會淘到自己喜歡的工具。
項目地址：
https://github.com/zhaoolee/ChromeAppHeroes
3.Microsoft Whiteboard
Microsoft Whiteboard 是由微軟推出的一款電子白板軟件，能幫助你便捷的記錄想法、靈感與創意。它支持實時協作，云端保存等功能。目前可以免費下載，喜歡的朋友可以試試。 ????
項目地址：
https://products.office.com/zh-cn/microsoft-whiteboard/digital-whiteboard-app
4.StarrySky
這是一個豐富的音樂播放封裝庫。它針對快速集成音頻播放功能，減少大家搬磚的時間，提升開發效率。
項目地址：
https://github.com/EspoirX/StarrySky
5.Awesome Actions
這個倉庫匯集了與 GitHub Actions 相關的優質內容。除了官方推薦以外，作者還匯總了 Actions 相關的工具、應用、測試、服務等眾多內容。 ?
項目地址：
https://github.com/sdras/awesome-actions
6.A Programmer's Guide to English
這是一個專為程序員編寫的英語學習指南。面對網上雜七雜八的英語學習技巧，如果想要學好英語，這個指南將會減少你不必要花費的時間。
項目地址：
https://github.com/yujiangshui/A-Programmers-Guide-to-English
1.Simple CSS Waves
純 CSS 實現簡單的波浪動畫。
查看源碼：
https://codepen.io/goodkatz/pen/LYPGxQz
2.CSS 3D Carousel Room
CSS+JS 實現 3D Carousel Room 效果。
查看源碼：
https://codepen.io/Anemolo/pen/ERPvZV
3.Pure CSS Cute Cup
純 CSS 繪制可愛杯子動畫。
查看源碼：
https://codepen.io/keirafoxy/pen/JgdBVW
4.Play Hard
HTML+CSS+JS 實現《Play Hard》文字伸縮炫彩動畫。
查看源碼：
https://codepen.io/chrisgannon/pen/KONLar
5.CSS Only-Social Icons
純 CSS 實現帶有 Hover 效果的社交圖標。
查看源碼：
https://codepen.io/Stockin/pen/aQoQGr
100 Days Of ML Code
人工智能一直是科技領域的熱點，目前市場的需求也更為強烈，所以想學它人不在少數。但是，面對網絡上良莠不齊的學習資源，鑒別和甄選其價值卻耗費了我們不少時間與精力。今天分享的《100 Days Of ML Code》——百日機器學習計劃，在 GitHub 上可謂相當火爆，于是有熱心網友就將其翻譯成了中文版本，供大家參考與學習。
這是一個系統的學習計劃，作者圖文并茂的講述了機器學習的相關概念，并有源碼輔助教學，內容從易到難、循序漸進的幫你掌握機器學習的概念與應用，推薦給大家。
項目地址：
https://github.com/MLEveryday/100-Days-Of-ML-Code
感謝你的閱讀。若你有所收獲，點贊與分享是給我最大的支持。
注：
如需轉載，煩請按下方注明出處信息，謝謝！
作者：IT程序獅
原文地址：
https://zhuanlan.zhihu.com/p/81911980
同時也歡迎關注我的微信公眾號【IT程序獅】，不定期分享 IT 學習文章與資源。
1.開源精粹！18 個值得關注的開源項目與工具
2.開源精粹（二）！22 個實用、有趣的開源項目
3.開源精粹（三）！程序員必備的21款工具與編程靈感
用JavaScript實現文字逐步展現的動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript文字動畫</title>
</head>
<body>
<div class="container"></div>
</body>
<script>
const containerEI=document.querySelector(".container");
const careers=["跟著我","每天學習一點點","讓你不再枯燥","不再孤單"];
let careerIndex=0;
let characterIndex=0;
updateText();
function updateText() {
characterIndex++;
containerEI.innerHTML=`
<h1>JavaScript文字動畫${careers[careerIndex].slice(0,characterIndex)}</h1>
`;
if(characterIndex===careers[careerIndex].length){
careerIndex++;
characterIndex=0;
}
if(careerIndex===careers.length){
careerIndex=0;
}
setTimeout(updateText,400);
}
</script>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background-color: #fd946a;
font-family: "Permanent Marker", cursive;
}
</style>
</html>
學習點：
1、document.querySelector()返回container元素的信息
2、innerHTML：更改html元素的內容，可以設置或返回表格行的開始和結束標簽之間的HTML
3、slice(參數1，參數2) :從已有的數組中返回選定的元素
參數1：從何處開始選取
參數2：從何處結束選取
4、setTimeout()：定時執行一個函數或指定的一段代碼
使用JavaScript完成文字的逐步展現，可以做一個簡短的動畫，讓界面更加生動有趣。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
