[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<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"> <b>{{name}} </b> 的人生倒计时</span>
<span class="line"></span>
</div>
<br>
<div class="subTitle mark">
<a href="#"><span class="element"></span></a>
</div>
</div>
<div class="content">
<div id="from">
<p>
<b v-contenteditable="name">{{name}}</b>您好！您的生日是<b> <span
v-contenteditable="yearForYour">{{yearForYour}}</span> 年
<span v-contenteditable="monthForYour">{{monthForYour}}</span> 月<span
v-contenteditable="dayForYour">
{{dayForYour}}</span> 日</b>,虚岁<b>
{{xusui}}</b>岁，按平均寿命<b v-contenteditable="shouming">{{shouming}}</b>岁算，您已度过人生的：
</p>
<div v-html="theLife()" class="marginbottom"></div>
<p>你的<b>人生</b>已经走了 {{age}}年，你也享受过了 <b>{{yourtian}}</b> 个美妙的夜晚。请珍惜<b>每一天、每一周、每个月、每一年</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>
<p>以上源码改编于[url]https://blog.csdn.net/huang_ftpjh/article/details/107840730[/url]以及[url]https://shijisuishu.bmcx.com/19780506__shijisuishu/[/url]，希望哪位高手能把姓名、生日、平均寿命和175行的80这个平均寿命能设置成自定义输入值即显示效果，如果再加个能自动显示阴历生日就更加完美了感谢！
</p>
</div>
</div>
<script>
Vue.directive('contenteditable', {
bind(el, binding, vnode) {
el.contentEditable = true;
let debounceTimer = null;
el.addEventListener('input', () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
const model = vnode.context[binding.expression];
if (model && typeof model === 'object') {
model[binding.arg] = el.textContent;
} else {
vnode.context[binding.expression] = el.textContent;
}
}, 500);
});
},
});
var vm = new Vue({
el: '#app',
data: {
name: "某某某",//姓名可改
age: "",//自动值
year: "",//自动值
month: "",//自动值
day: "",//自动值
curday: "",//自动值
time: "",//自动值
hour: "",//自动值
minute: "",//自动值
sec: "",//自动值
week: "",//自动值
curweek: "",//自动值
life: "",//自动值
outday: "",//自动值
shouming: "80",//平均寿命可改
xusui: "",//自动值
yearForYour: "1978",//生日年
monthForYour: "05",//生日月
dayForYour: "06",//生日日
yourtian: ""//自动值
},
created: function () {//这里是定时器，必须
this.timer();
setInterval(this.timer, 60000);
},
watch: {
name(n, o) { this.load(); },
yearForYour(n, o) { this.load(); },
monthForYour(n, o) { this.load(); },
dayForYour(n, o) { this.load(); },
shouming(n, o) { this.load(); }
},
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代表星期天)
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 - 1;
this.xusui = myYear - this.yearForYour + 1;
},
//life
theLife: function () {
var dt = new Date(this.yearForYour, this.monthForYour, this.dayForYour);
var today = new Date();
var ms = today.getTime() - dt.getTime();
this.yourtian = parseInt(ms / 86400000) + 31;//31是我自己加上去的，否则数值不对
var lift = (parseInt(ms / 86400000 / 365) / this.shouming * 100).toFixed(1);//80是平均寿命，可改
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-danger
if (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';
}
},
load() {
console.log(`执行load`);
this.timer();
this.theLife();
this.jinduT();
this.jinduD();
this.jinduY();
}
}
});
</script>
<!--typed.js 打字效果-->
<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
var title = "\"更好的有很多很多，但刚刚好的只有你一个\" ";//打字效果文本，可改
var typed = new Typed(".element", {
strings: [" ", title],
cursorChar: "_",
typeSpeed: 70,
loop: !1
});
typed.stop();
$(document).ready(function () {
$(".element").addClass("h2");
$(".typed-cursor").addClass("h2");
typed.start()
})
</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>
发表于 2024-4-25 21:42
|
发表于 2024-4-25 21:43
|楼主
收藏
淘帖
有用
分享到朋友圈
