制作个人网站 之 人生进度条
生活随笔
收集整理的這篇文章主要介紹了
制作个人网站 之 人生进度条
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
來源： 仿照 uTools里的人生進(jìn)度條插件用頁面的形式寫出
目的： 做個(gè)人網(wǎng)站的目的就是把看到的變成自己實(shí)現(xiàn)的案例這些值由后臺(tái)數(shù)據(jù)庫獲取 這里寫死了
你的名字 {}
你打算活到幾歲
你的生日
時(shí)鐘為羅盤時(shí)鐘? 在jq插件網(wǎng)找到
?
life.html? ?與?clock.html放在同一目錄下? ，源碼在下面鏈接? 右鍵-- 查看源代碼即可? ? ?/clock.html是時(shí)鐘
http://www.junhao.host/life.html
?
2020-08-07
測(cè)試type.js等? ?一些博客網(wǎng)站上存在的一些東西
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.typed-cursor{opacity: 1;-webkit-animation: blink 0.7s infinite;-moz-animation: blink 0.7s infinite;animation: blink 0.7s infinite;}@keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}@-webkit-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}@-moz-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}.container {position: relative;left: 50%;right: 50%;width: 24px;height: 24px;}.chevron {position: absolute;width: 28px;height: 8px;opacity: 0;transform: scale3d(0.5, 0.5, 0.5);animation: move 3s ease-out infinite;}.chevron:first-child {animation: move 3s ease-out 1s infinite;}.chevron:nth-child(2) {animation: move 3s ease-out 2s infinite;}.chevron:before,.chevron:after {content: ' ';position: absolute;top: 0;height: 100%;width: 51%;background: #656060;}.chevron:before {left: 0;transform: skew(0deg, 30deg);}.chevron:after {right: 0;width: 50%;transform: skew(0deg, -30deg);}@keyframes move {25% {opacity: 1;}33% {opacity: 1;transform: translateY(30px);}67% {opacity: 1;transform: translateY(40px);}100% {opacity: 0;transform: translateY(55px) scale3d(0.5, 0.5, 0.5);}}@keyframes pulse {to {opacity: 1;}}/*文字顯示隱藏效果*/.text {display: block;margin-top: 75px;margin-left: -30px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;font-size: 20px;color: #656060;text-transform: uppercase;white-space: nowrap;opacity: .25;animation: pulse 2s linear alternate infinite;}</style><!--非重點(diǎn) 向下滾動(dòng)內(nèi)容彈出的--><style>p{height: 10em;text-align: center; vertical-align: middle;line-height: 10em; font-size: 1.5em; margin: 2em 1em; }p.div1{ background: #A3C6BE; color: #403F31;}p.div2{ background: #87A18E; color: #000; }</style> </head> <body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script><div style="margin: 0 auto; width:100%;height:300px;"><span class="element"></span> </div><script>// 方法一 慢 // var typed = new Typed('.element', {//停頓1S// strings: ["糾正一個(gè)錯(cuò)誤的方法有很多 ^1000 .", "而解決一個(gè)錯(cuò)誤的終極方法，就是不給它發(fā)生的機(jī)會(huì)。"], //輸入內(nèi)容, 支持html標(biāo)簽// typeSpeed: 30 //打字速度 200// ,backSpeed: 500 //回退速度 100// ,showCursor: true// ,cursorChar: "_"// // ,typeSpeed: 0// });//方法二 這個(gè)速度太快了// <div id="typed-strings"></div>// var writeContent = 'Huangbin I Love You Forver';//要書寫的內(nèi)容// var displayContent = $('#typed-strings');//展示書寫文字的容器// var index = 0;//索引// var length = writeContent.length;//書寫內(nèi)容的長度// var tiemerName = null;//定時(shí)器的名字// function start(){// displayContent.text('');//清空展示容器的內(nèi)容// tiemerName=setInterval(function(){// displayContent.append(writeContent.charAt(index));//charAt返回指定所應(yīng)出的字符；// if(index++ === length){//如果寫道最后一個(gè)字符了，清除定時(shí)器，從第一個(gè)字符重新開始寫；// clearInterval(tiemerName);//清除定時(shí)器// index = 0;// start()//回調(diào)，自己調(diào)用自己// }// },100);// }// start();// 方法三 var typed=new Typed(".element",{strings:[" ","看時(shí)光飛逝 我回首從前 曾經(jīng)是莽撞少年 曾經(jīng)度日如年 我是如此平凡卻又如此幸運(yùn) 我要說聲謝謝你 在我生命中的每一天 "],cursorChar:"_",typeSpeed:70,loop:!1});typed.stop();$(document).ready(function(){$(".typed-cursor").addClass("h2"),typed.start()}) </script><br> <br> <br> <div class="container"><div class="chevron"></div><div class="chevron"></div><div class="chevron"></div> </div> <br> <br> <br><p>tishi: 向下滾動(dòng)內(nèi)容滑動(dòng)展示</p> <p class="div1"><a href='http://www.lanrenzhijia.com/'>懶人之家</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/flash/'>Flash素材</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/nav/'>菜單導(dǎo)航</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/time/'>時(shí)間日期</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/banner/'>焦點(diǎn)圖</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/tab/'>tab標(biāo)簽</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/jquery/'>jquery特效</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/service/'>在線客服</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/ads/'>廣告代碼</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/album/'>相冊(cè)代碼</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/pic/'>圖片特效</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/famous/'>名站特效</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/others/'>其他代碼</a></p> <script src="flowup.js"></script> <script>$(function(){$("body").flowUp("p", { transalteY: 350, duration: 1 });}); </script></body> </html>?
?
最后，這是加了? 測(cè)試type.js后的? ? life.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script><!--<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>--><style>*{margin: 0;padding: 0;}b{margin: 3px;}.head{margin: 0 auto;}.title {height: 60px;line-height: 60px;text-align: center;}.title .line {display: inline-block;width: 250px;/*vertical-align: -4px;*/border-top: 1px solid #ccc ;}.title .txt {color: #686868;vertical-align: middle;}.subTitle{color: #686868;text-align: center;width: 100%;}#from{width: 90%; padding-left: 5%;padding-right: 5%;}.content{width: 1100px;/*height: 800px;*/margin: 0 auto;padding-top: 30px;/*padding-left: 20%;padding-right: 20%;*/background-color: #fff; opacity: 0.9;}#iframe{/*min-width: 1000px;*/width: 100%;height: 420px;/*left: 50%;*//*right: 50%;*/overflow: hidden;}.marginbottom{margin-bottom: 10px;}/*type.js 使用的css*/.typed-cursor{opacity: 1;-webkit-animation: blink 0.7s infinite;-moz-animation: blink 0.7s infinite;animation: blink 0.7s infinite;}@keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}@-webkit-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}@-moz-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}/*type.js 使用的css end*/</style> </head> <!--你的名字 {}你打算活到幾歲你的生日 這些涉及到人生度過% 大概吃了幾頓飯 度過多少個(gè)周末 享受過夜晚計(jì)算規(guī)則：過去了多少天，即當(dāng)前天-1當(dāng)前星期幾(0-6,0代表星期天)今天過去時(shí)間百分比 (this.hour*60+this.minute)/24/60本周過去時(shí)間百分比 (this.week*24*60+this.hour*60+this.minute)/7/24/60這個(gè)月過去時(shí)間百分比 (this.day*24*60+this.hour*60+this.minute)/days/24/60/ (days為這個(gè)月具體多少天)今年過去時(shí)間 現(xiàn)在時(shí)間-今年1月1好0時(shí)0分0秒000毫秒的時(shí)間人生進(jìn)度條 現(xiàn)在時(shí)間-生日時(shí)間 得出具體的毫秒值進(jìn)度條顏色安排： 20綠 bg-success20-50藍(lán) bg-info50-80黃 bg-warning紅 bg-danger--> <body ><div class="container" id="app"><div class="head"><div class="title"><span class="line"></span><!--名字前面可以來個(gè)圖--><span class="txt"> 雨夜歌曰雨歌夜 （{{age}}）</span><span class="line"></span></div><br><div class="subTitle mark"><!--{{title}} 這里的名句 創(chuàng)建個(gè)方法 點(diǎn)擊一下?lián)Q一句 --><!--https://www.tianapi.com/apiview/26 會(huì)員免費(fèi)？？？ 5000個(gè)夠你玩了 --><!--后臺(tái)也可以專門寫一個(gè)數(shù)據(jù)表 存取你喜歡的名言名句 通過隨機(jī)數(shù)確定獲取哪一句 --><span class="element"></span></div></div><div class="content" ><div id="from"><p>你的<b>人生</b>已經(jīng)走了 {{age}}年 </p><div v-html="theLife()" class="marginbottom"></div><p>您的生日： {{yearForYour}} 年 {{monthForYour}} 月 {{dayForYour}} 日<span style="padding-left: 20px;">現(xiàn)中國人類平均壽命是76.34歲 這里按80歲算~_~</span></p><p> 你可能已經(jīng)吃過了<b>{{youreat}}</b>, 度過了<b>{{yourweek}}</b>個(gè)愉快的周末， 以及享受過 <b>{{yourtian}}</b> 個(gè)美妙的夜晚</p><hr style="border-top:1px dashed #987cb9;" width="100%" color="#987cb9" size=1><p>今<b>天</b>已經(jīng)過去了 大約 {{hour}}小時(shí)</p><div v-html="jinduT()" class="marginbottom"></div><p>本<b>周</b>已經(jīng)過去了 {{week}}天， 這是第{{curweek}}天</p><div v-html="jinduZ()" class="marginbottom"></div><p>這個(gè)<b>月</b>已經(jīng)過去了 {{day}}天 ， 這是第{{curday}}天</p><div v-html="jinduD()" class="marginbottom"></div><p>{{year}}<b>年</b>已經(jīng)過去了 {{month}}個(gè)月 度過了{(lán){outday}}天</p> <!--{{year}}--><div v-html="jinduY()" class="marginbottom"></div></div><br><br></div><!-- clock --><iframe id="iframe" src="clock.html" scrolling="no" frameborder="0"><!--src="https://www.baidu.com"--></iframe></div><script>var vm = new Vue({el: '#app',data: {site: "更好的有很多很多，但剛剛好的只有你一個(gè)", //獻(xiàn)給要過生日的某某人 這個(gè)詞可以換的age: "24",year:"",month:"",day:"",curday:"",time:"",hour:"",minute:"",sec:"",week:"",curweek:"",life:"",outday:"",yearForYour:"1997",monthForYour:"1",dayForYour:"4",yourtian:"",youreat:"",yourweek:""},created: function () {//這里是定時(shí)器this.timer();setInterval(this.timer, 60000);},methods: {// 我的理解是方法區(qū)和數(shù)據(jù)區(qū)timer: function() {var myDate = new Date();var myYear = myDate.getFullYear(); // 獲取當(dāng)前年份var myMonth = myDate.getMonth() +1; // 獲取當(dāng)前月份var myDay = myDate.getDate(); // 獲取當(dāng)前日（1- 31）var myHours = myDate.getHours(); // 獲取當(dāng)前小時(shí)(0-23)var myMinu = myDate.getMinutes(); // 獲取當(dāng)前分鐘(0-59)var mySec = myDate.getSeconds(); // 獲取當(dāng)前秒數(shù)(0-59)var myWeek = myDate.getDay(); //獲取當(dāng)前星期幾(0-6,0代表星期天)// if (this.monthForYour==myMonth && this.dayForYour==myDay ){// //祝你生日快樂 撒花 這個(gè)老兄的煙花或者自己寫 https://github.com/cunzher/canvas-/blob/master/index.html// }this.hour = myHours;this.year = myYear;this.month = myMonth-1;this.day = myDay-1; this.curday=myDay;this.week = myWeek-1; this.curweek = myWeek;this.minute = myMinu;this.age = myYear-this.yearForYour;},//lifetheLife:function(){var dt = new Date(this.yearForYour, this.monthForYour, this.dayForYour);var today = new Date();var ms = today.getTime() - dt.getTime();//parseInt((today.getTime() - dt.getTime())/86400000);this.yourtian = parseInt(ms/86400000);this.youreat = parseInt(ms/86400000)*3;this.yourweek = parseInt(ms/86400000/7);var lift = (parseInt(ms/86400000/365)/80 *100).toFixed(1);var color = this.jinduColor(lift);return "<div class='progress'> <div class='progress-bar "+ color +" progress-bar-striped progress-bar-animated' style='width:"+ lift +"%'>"+lift+"</div> </div>";},//今天jinduT:function(){var tian = ((this.hour*60+this.minute)/24/60*100).toFixed(1); // + "%"var color = this.jinduColor(tian);return "<div class='progress'> <div class='progress-bar "+ color +" progress-bar-striped progress-bar-animated' style='width:"+ tian +"%'>"+tian+"</div> </div>";},//本周jinduZ:function(){var curdayWithHour = (this.week*24*60+this.hour*60+this.minute)/7/24/60;var zhou = (curdayWithHour*100).toFixed(1);var color = this.jinduColor(zhou);return "<div class='progress'> <div class='progress-bar "+ color +" progress-bar-striped progress-bar-animated' style='width:"+ zhou +"%'>"+zhou+"</div> </div>";},//這個(gè)月jinduD:function(){var days=new Date(this.year,this.month+1,0).getDate();var yue = ((this.day*24*60+this.hour*60+this.minute)/days/24/60*100).toFixed(1); //js如何得到這個(gè)月具體多少天var color = this.jinduColor(yue);return "<div class='progress'> <div class='progress-bar "+ color +" progress-bar-striped progress-bar-animated"+ color +"' style='width:"+ yue +"%'>"+yue+"</div> </div>";},//年jinduY:function(){var olddate = new Date(this.year, 0);var nowdate = new Date(this.year,this.month,this.day+1);var outday = (nowdate - olddate) / (1000 * 60 * 60 * 24) + 1;//this.outday = outday;//已經(jīng)過去天數(shù)var isLeap = (0===this.year%4) && (0===this.year%100) || (0===this.year%400);var days = isLeap ? 366 : 365;//今年的天數(shù)var ye = (((outday-1)*24*60 + this.hour*60+ this.minute)/days/24/60*100).toFixed(1);var color = this.jinduColor(ye);return "<div class='progress'> <div class='progress-bar "+ color +" progress-bar-striped progress-bar-animated"+ color +"' style='width:"+ ye +"%'>"+ye+"</div> </div>";},jinduColor: function (value) {// 20綠 bg-success// 20-50藍(lán) bg-info// 50-80黃 bg-warning// 紅 bg-dangerif (value >= 80) {return 'bg-danger';}else if(value >= 50 && value<80){return 'bg-warning';}else if(value >= 20 && value<50){return 'bg-info';}else {return 'bg-success';}}}// ,components: {// 'Demo': clock //將別名demo 變成 組件 Demo// }})</script><!--typed.js 打字效果--><script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script><script>var title = "\"更好的有很多很多，但剛剛好的只有你一個(gè)\" ";//測(cè)試得出這個(gè)值可以用ajax或其它方法從后臺(tái)獲取var typed=new Typed(".element",{// strings:[" ","\"更好的有很多很多，但剛剛好的只有你一個(gè)\" "], //看時(shí)光飛逝 我回首從前 曾經(jīng)是莽撞少年 曾經(jīng)度日如年 我是如此平凡卻又如此幸運(yùn) 我要說聲謝謝你 在我生命中的每一天 strings:[" ",title], //看時(shí)光飛逝 我回首從前 曾經(jīng)是莽撞少年 曾經(jīng)度日如年 我是如此平凡卻又如此幸運(yùn) 我要說聲謝謝你 在我生命中的每一天 cursorChar:"_",typeSpeed:70,loop:!1});typed.stop();$(document).ready(function(){$(".element").addClass("h2");$(".typed-cursor").addClass("h2");typed.start()})</script><script>/*** Copyright (c) 2016 hustcc* License: MIT* Version: v1.0.1* GitHub: https://github.com/hustcc/ribbon.js**/!function(){function e(e,t,n){return Number(e.getAttribute(t))||n}function t(){for(r.clearRect(0,0,h,s),a=[{x:0,y:.7*s+u},{x:0,y:.7*s-u}];a[1].x<h+u;)n(a[0],a[1])}function n(e,t){r.beginPath(),r.moveTo(e.x,e.y),r.lineTo(t.x,t.y);var n=t.x+(2*p()-.25)*u,o=i(t.y);r.lineTo(n,o),r.closePath(),m-=x/-50,r.fillStyle="#"+(127*y(m)+128<<16|127*y(m+x/3)+128<<8|127*y(m+x/3*2)+128).toString(16),r.fill(),a[0]=a[1],a[1]={x:n,y:o}}function i(e){return l=e+(2*p()-1.1)*u,l>s||l<0?i(e):l}var o=document.getElementsByTagName("script"),c=o[o.length-1];config={z:e(c,"zIndex",-1),a:e(c,"alpha",.6),s:e(c,"size",90)};var a,l,d=document.createElement("canvas"),r=d.getContext("2d"),g=window.devicePixelRatio||1,h=window.innerWidth,s=window.innerHeight,u=config.s,f=Math,m=0,x=2*f.PI,y=f.cos,p=f.random;d.width=h*g,d.height=s*g,r.scale(g,g),r.globalAlpha=config.a,d.style.cssText="position:fixed;top:0;left:0;z-index: "+config.z+";width:100%;height:100%;pointer-events:none;opacity:0.5;",document.getElementsByTagName("body")[0].appendChild(d),document.onclick=t,document.ontouchstart=t,t()}();</script><script>//鼠標(biāo)點(diǎn)擊出現(xiàn)愛心特效(function(window,document,undefined){var hearts = [];window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback){setTimeout(callback,1000/60);}})();init();function init(){css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");attachEvent();gameloop();}function gameloop(){for(var i=0;i<hearts.length;i++){if(hearts[i].alpha <=0){document.body.removeChild(hearts[i].el);hearts.splice(i,1);continue;}hearts[i].y--;hearts[i].scale += 0.004;hearts[i].alpha -= 0.013;hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;}requestAnimationFrame(gameloop);}function attachEvent(){var old = typeof window.onclick==="function" && window.onclick;window.onclick = function(event){old && old();createHeart(event);}}function createHeart(event){var d = document.createElement("div");d.className = "heart";hearts.push({el : d,x : event.clientX - 5,y : event.clientY - 5,scale : 1,alpha : 1,color : randomColor()});document.body.appendChild(d);}function css(css){var style = document.createElement("style");style.type="text/css";try{style.appendChild(document.createTextNode(css));}catch(ex){style.styleSheet.cssText = css;}document.getElementsByTagName('head')[0].appendChild(style);}function randomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";}})(window,document);</script></body> </html>?
--2020-08-12
已經(jīng)存在一些接口? ? ?當(dāng)然可以自己寫? ?用python爬取一些句子存在數(shù)據(jù)庫中，有哪些網(wǎng)站有名言名句的（最好有句子的來源，作者），歡迎留言
window.info = function() {fetch("https://v1.hitokoto.cn").then(response => response.json()).then(result => {alert("「" + result.hitokoto + "」——" + result.from);});};// {// "id": 878,// "uuid": "c3fd33c9-3fd6-4e8b-a3dd-025a52b66c09",// "hitokoto": "我們一直在一起，所以最后也想在你身旁。",// "type": "a",// "from": "火影忍者",// "from_who": null,// "creator": "hitokoto",// "creator_uid": 1775,// "reviewer": 0,// "commit_from": "web",// "created_at": "1478787580",// "length": 19// }?
?
總結(jié)
以上是生活随笔為你收集整理的制作个人网站 之 人生进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Autolayout使用详细介绍
- 下一篇： 简单进度条实现