當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

制作个人网站之人生进度条

發布時間：2024/3/26 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了制作个人网站之人生进度条小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

來源：仿照 uTools里的人生進度條插件用頁面的形式寫出目的：做個人網站的目的就是把看到的變成自己實現的案例這些值由后臺數據庫獲取這里寫死了你的名字 {} 你打算活到幾歲你的生日

時鐘為羅盤時鐘? 在jq插件網找到

life.html? ?與?clock.html放在同一目錄下? ，源碼在下面鏈接? 右鍵-- 查看源代碼即可? ? ?/clock.html是時鐘

http://www.junhao.host/life.html

2020-08-07

測試type.js等? ?一些博客網站上存在的一些東西

<!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><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: ["糾正一個錯誤的方法有很多 ^1000 .", "而解決一個錯誤的終極方法，就是不給它發生的機會。"], //輸入內容, 支持html標簽// typeSpeed: 30 //打字速度 200// ,backSpeed: 500 //回退速度 100// ,showCursor: true// ,cursorChar: "_"// // ,typeSpeed: 0// });//方法二這個速度太快了// <div id="typed-strings"></div>// var writeContent = 'Huangbin I Love You Forver';//要書寫的內容// var displayContent = $('#typed-strings');//展示書寫文字的容器// var index = 0;//索引// var length = writeContent.length;//書寫內容的長度// var tiemerName = null;//定時器的名字// function start(){// displayContent.text('');//清空展示容器的內容// tiemerName=setInterval(function(){// displayContent.append(writeContent.charAt(index));//charAt返回指定所應出的字符；// if(index++ === length){//如果寫道最后一個字符了，清除定時器，從第一個字符重新開始寫；// clearInterval(tiemerName);//清除定時器// index = 0;// start()//回調，自己調用自己// }// },100);// }// start();// 方法三 var typed=new Typed(".element",{strings:[" ","看時光飛逝我回首從前曾經是莽撞少年曾經度日如年我是如此平凡卻又如此幸運我要說聲謝謝你在我生命中的每一天 "],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: 向下滾動內容滑動展示</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/'>菜單導航</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/time/'>時間日期</a></p> <p class="div1"><a href='http://www.lanrenzhijia.com/banner/'>焦點圖</a></p> <p class="div2"><a href='http://www.lanrenzhijia.com/tab/'>tab標簽</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/'>相冊代碼</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>

最后，這是加了? 測試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><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>  <body ><div class="container" id="app"><div class="head"><div class="title"><span class="line"></span><span class="txt"> 雨夜歌曰雨歌夜（{{age}}）</span><span class="line"></span></div><br><div class="subTitle mark"><span class="element"></span></div></div><div class="content" ><div id="from"><p>你的<b>人生</b>已經走了 {{age}}年 </p><div v-html="theLife()" class="marginbottom"></div><p>您的生日： {{yearForYour}} 年 {{monthForYour}} 月 {{dayForYour}} 日<span style="padding-left: 20px;">現中國人類平均壽命是76.34歲這里按80歲算~_~</span></p><p> 你可能已經吃過了<b>{{youreat}}</b>, 度過了<b>{{yourweek}}</b>個愉快的周末，以及享受過 <b>{{yourtian}}</b> 個美妙的夜晚</p><hr style="border-top:1px dashed #987cb9;" width="100%" color="#987cb9" size=1><p>今<b>天</b>已經過去了大約 {{hour}}小時</p><div v-html="jinduT()" class="marginbottom"></div><p>本<b>周</b>已經過去了 {{week}}天，這是第{{curweek}}天</p><div v-html="jinduZ()" class="marginbottom"></div><p>這個<b>月</b>已經過去了 {{day}}天，這是第{{curday}}天</p><div v-html="jinduD()" class="marginbottom"></div><p>{{year}}<b>年</b>已經過去了 {{month}}個月度過了{{outday}}天</p> <div v-html="jinduY()" class="marginbottom"></div></div><br><br></div><iframe id="iframe" src="clock.html" scrolling="no" frameborder="0"></iframe></div><script>var vm = new Vue({el: '#app',data: {site: "更好的有很多很多，但剛剛好的只有你一個", //獻給要過生日的某某人這個詞可以換的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 () {//這里是定時器this.timer();setInterval(this.timer, 60000);},methods: {// 我的理解是方法區和數據區timer: function() {var myDate = new Date();var myYear = myDate.getFullYear(); // 獲取當前年份var myMonth = myDate.getMonth() +1; // 獲取當前月份var myDay = myDate.getDate(); // 獲取當前日（1- 31）var myHours = myDate.getHours(); // 獲取當前小時(0-23)var myMinu = myDate.getMinutes(); // 獲取當前分鐘(0-59)var mySec = myDate.getSeconds(); // 獲取當前秒數(0-59)var myWeek = myDate.getDay(); //獲取當前星期幾(0-6,0代表星期天)// if (this.monthForYour==myMonth && this.dayForYour==myDay ){// //祝你生日快樂撒花這個老兄的煙花或者自己寫 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>";},//這個月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如何得到這個月具體多少天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;//已經過去天數var isLeap = (0===this.year%4) && (0===this.year%100) || (0===this.year%400);var days = isLeap ? 366 : 365;//今年的天數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藍 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><script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script><script>var title = "\"更好的有很多很多，但剛剛好的只有你一個\" ";//測試得出這個值可以用ajax或其它方法從后臺獲取var typed=new Typed(".element",{// strings:[" ","\"更好的有很多很多，但剛剛好的只有你一個\" "], //看時光飛逝我回首從前曾經是莽撞少年曾經度日如年我是如此平凡卻又如此幸運我要說聲謝謝你在我生命中的每一天 strings:[" ",title], //看時光飛逝我回首從前曾經是莽撞少年曾經度日如年我是如此平凡卻又如此幸運我要說聲謝謝你在我生命中的每一天 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>//鼠標點擊出現愛心特效(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

已經存在一些接口? ? ?當然可以自己寫? ?用python爬取一些句子存在數據庫中，有哪些網站有名言名句的（最好有句子的來源，作者），歡迎留言

總結

以上是生活随笔為你收集整理的制作个人网站之人生进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Autolayout使用详细介绍
下一篇：简单进度条实现

编程问答

制作个人网站 之 人生进度条

總結

制作个人网站之人生进度条