搜索到
7
篇与
的结果
-
HTML页面中如何插入自适应视频 想要浏览器窗口有多大，视频就显示多大，其实很简单 来看示例： 第二种： 具体代码如下：方案一：<div class="videoContent"> <video class="videoElement" src="http://pic.ygmgo.cn/view.php/8c58c018e6798ceda377f89f1d9565f8.mp4" controls preload="auto" width="100%" height="100%"></video> </div>方案二：<video width="100%" height="100%" autoplay src="http://pic.ygmgo.cn/view.php/8c58c018e6798ceda377f89f1d9565f8.mp4"></video>方案二就是示例的第一个，存在视频自动播放后，无法重新播放的问题 毕竟HTML为本人自学，如果有什么错误请及时纠正 -
给网站页面设置加密访问 怎么给网页设置为加密访问，只需要简单的一个HTML代码即可 效果图： 代码如下：<SCRIPT language=JavaScript> function password() { var testV = 1; var pass1 = prompt('请输入密码:',''); while (testV < 3) { if (!pass1) history.go(-1); if (pass1 == "这里输入你想设置的密码") { alert('密码正确!'); break; } testV+=-1; var pass1 = prompt('八嘎密码错误!请重新输入:'); } if (pass1!="password" & testV ==3) history.go(-1); return " "; } document.write(password()); </SCRIPT>{message type="success" content="只需要把此代码放入到〈/head〉标签前即可"/}{progress percentage="100" color="#ff6c6c"/}至此教程结束，不懂的评论区留言
-
给网站侧边栏添加恋爱计时器 如图所示： 代码如下：<div class="joe_aside__item hot" style="text-align: center; color:#888; font-size: 15px; padding:10px;"> <div style="width: 220px; margin: 0 auto;"> <!-- 左边的头像，nk=后面填写QQ号，直接采集QQ头像 --> <img src="https://q1.qlogo.cn/g?b=qq&nk=2995017852&s=640" alt="love" style="width: 60px; border-radius: 50%;"> <!-- 中间的图片 --> <img src="http://pic.ygmgo.cn/view.php/0b9b3a8c704051bea4f2a46b3689a906.gif" alt="love" style="width: 60px; border-radius: 50%;"> <!-- 右边的头像，nk=后面填写QQ号，直接采集QQ头像 --> <img src="https://q1.qlogo.cn/g?b=qq&nk=1665985833&s=640" alt="love" style="width: 60px; border-radius: 50%;"> </div> <p id="lovepyqSitetime"></p> <script language=javascript> function lovepyqSitetime() { window.setTimeout("lovepyqSitetime()", 1000); var seconds = 1000 var minutes = seconds * 60 var hours = minutes * 60 var days = hours * 24 var years = days * 365 var today = new Date() var todayYear = today.getFullYear() var todayMonth = today.getMonth() + 1 var todayDate = today.getDate() var todayHour = today.getHours() var todayMinute = today.getMinutes() var todaySecond = today.getSeconds() // 时间设置 var t1 = Date.UTC(2023, 01, 01, 22, 22, 00) //年，月，日，时，分，秒 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond) var diff = t2 - t1 var diffYears = Math.floor(diff / years) var diffDays = Math.floor((diff / days) - diffYears * 365) var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours) var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes) var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds) document.getElementById("lovepyqSitetime").innerHTML = "我们相恋了：</br>" + diffYears + "年" + diffDays + "天" + diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦" } lovepyqSitetime() </script> </div>
-
网页添加访问提示代码 如图： 应用方法很简单，把以下代码放到网页底部即可，如果是应用到博客类的站点，在主题设置里面找到相对应的位置添加即可。 代码如下： <!-- 客户端信息 --> <div id="fps" style="z-index:5;position:fixed;bottom:3px;left:3px;color:#2196F3;font-size:10px;"></div> <script type="text/javascript" src="https://jsd.ucbk.cn/gh/kaliisra/myblogstatic/kehuduan-js/fetch.min.js"></script> <script src="https://cdn.gmit.vip/layer/3.1.1/layer.js" type="text/javascript" charset="utf-8"></script> <script> /*网站打开提醒代码开始*/ $(function(){ if(/*getCookie('msg') !=*/ 1){ var t = document.createElement("a"); t.href = document.referrer; var msgTitle = t.hostname; var name = t.hostname.split(".")[1]; if("" !== document.referrer){ switch (name) { case 'bing': msgTitle = '必应搜索'; break; case 'baidu': msgTitle = '百度搜索'; break; case 'so': msgTitle = '360搜索'; break; case 'google': msgTitle = '谷歌搜索'; break; case 'sm': msgTitle = '神马搜索'; break; case 'sogou': msgTitle = '搜狗搜索'; break; default: msgTitle = t.hostname; }; }; var time = (new Date).getHours(); var msg = ''; 23 < time || time <= 5 ? msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？": 5< time && time <= 7 ? msg = "早上好！一日之计在于晨，美好的一天就要开始了！": 7< time && time <= 11 ? msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！": 11< time && time <= 14 ? msg = "中午了，工作了一个上午，现在是午餐时间！": 14< time && time <= 17 ? msg = "午后很容易犯困呢，今天的运动目标完成了吗？": 17< time && time <= 19 ? msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~": 19< time && time <= 21 ? msg = "晚上好，今天过得怎么样？": 21< time && time <= 23 && (msg = "已经这么晚了呀，早点休息吧，晚安~"); $.ajax({ type:"get", url:"https://open.gmit.vip/web/api/UserInfo/", async:true, success:function(data){ window.info = data; layer.msg("Hi~ 来自"+ data.data.location + '~<br/>通过 '+msgTitle+' 进来的朋友！<br/>使用 '+ data.data.os +"<br/>"+ data.data.browser +' 访问本站！' + '<br/>' + msg); var showFPS = (function(){ var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60); }; var e,pe,pid,fps,last,offset,step,appendFps; fps = 0; last = Date.now(); step = function(){ offset = Date.now() - last; fps += 1; if( offset >= 1000 ){ last += offset; appendFps(fps); fps = 0; }; requestAnimationFrame( step ); }; appendFps = function(fps){ var settings = { timeout: 5000, logError: true }; $('#fps').html('<span style="float:left;">'+fps+'FPS</span><br/><span style="float:left">'+window.info.data.os+'</span><br/><span style="float:left;margin-top:1px;">'+window.info.data.browser+'</span><br/><span style="float:left;margin-top:1px;">'+window.info.data.location+'</span><br/><span style="float:left;margin-top:1px;"></span>'); }; step(); })(); } }); }; }); </script>{message type="info" content="如果不显示，在网页头部or底部添加以下代码"/} <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
人生倒计时HTML源码 示例： body{background:linear-gradient(to right,#9796f0,#fbc7d4);color:#333;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Muli';height:100vh;margin:0}.reviews-container{background-color:#fff;border-radius:5px;box-shadow:0 3px 10px -5px rgba(0,0,0,0.3);padding:20px}.review{color:#777;padding:10px 10px 20px 10px;font-size:14px}.progress{background-color:rgba(100,100,100,0.2);border-radius:5px;position:relative;height:10px;width:200px;margin-right:50px;margin-top:10px}.progress-done{background:linear-gradient(to left,#f2709c,#ff9472);box-shadow:0 3px 3px -5px #f2709c,0 2px 5px #f2709c;border-radius:5px;height:10px;transition:width 2s ease .3s;animation:barberpole 9s linear infinite;background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:40px 40px}@keyframes barberpole{from{background-position:0 0}to{background-position:500px 0}}.percent{color:#333;float:right;margin-top:-14px}.social-panel-container{position:fixed;right:0;bottom:80px;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-10px)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,0.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none} 人生倒计时 const hh = new Date().getHours(),mm = new Date().getMinutes(),hhmmt = hh + '.' + mm; document.querySelector('.time .icon-container').innerText = '今天已过去 ' + hh + ' 小时'; document.querySelector('.time .progress-done').setAttribute("data-done", parseInt(hhmmt/24*100)); document.querySelector('.time .percent').innerText = parseInt(hhmmt/24*100) + '%'; dd = new Date().getDay(); if(dd==0){dd=7}; document.querySelector('.week .icon-container').innerText = '本周已过去 ' + dd + ' 天'; document.querySelector('.week .progress-done').setAttribute("data-done", parseInt(dd/7*100)); document.querySelector('.week .percent').innerText = parseInt(dd/7*100) + '%'; const md = new Date().getDate(),months = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate(); document.querySelector('.month .icon-container').innerText = '本月已过去 ' + md + ' 天'; document.querySelector('.month .progress-done').setAttribute("data-done", parseInt(md/months*100)); document.querySelector('.month .percent').innerText = parseInt(md/months*100) + '%'; const yy = new Date().getMonth(); document.querySelector('.year .icon-container').innerText = '今年已过去 ' + yy + ' 个月 零 ' + md + ' 天'; document.querySelector('.year .progress-done').setAttribute("data-done", parseInt(yy/12*100)); document.querySelector('.year .percent').innerText = parseInt(yy/12*100) + '%'; const d1="2023/01/22 00:00:00"; const dateBegin = new Date(d1); const dateEnd = new Date(); const dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数 const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数 const leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数 const hours=Math.floor(leave1/(3600*1000))//计算出小时数 const dayDifft = 365+dayDiff; document.querySelector('.festival .icon-container').innerText = '离春节还有' + Math.abs(dayDiff) + '天' +Math.abs(hours)+'时'; document.querySelector('.festival .progress-done').setAttribute("data-done", parseInt(dayDifft/365*100)); document.querySelector('.festival .percent').innerText = parseInt(dayDifft/365*100) + '%'; const progressDone = document.querySelectorAll('.progress-done'); progressDone.forEach(progress => { progress.style.width = progress.getAttribute('data-done') + '%'; if(progress.getAttribute('data-done')80){ progress.style.backgroundColor = "#d9534f"; progress.style.boxShadow = "-2px 2px 5px 0px #d9534f"; } if(progress.getAttribute('data-done')60){ progress.style.backgroundColor = "#f0ad4e"; progress.style.boxShadow = "-2px 2px 5px 0px #f0ad4e"; } if(progress.getAttribute('data-done')40){ progress.style.backgroundColor = "#5bc0de"; progress.style.boxShadow = "-2px 2px 5px 0px #5bc0de"; } if(progress.getAttribute('data-done')20){ progress.style.backgroundColor = "#5cb85c"; progress.style.boxShadow = "-2px 2px 5px 0px #5cb85c"; } if(progress.getAttribute('data-done')=0){ progress.style.backgroundColor = "#5cb85c"; progress.style.boxShadow = "-2px 2px 5px 0px #5cb85c"; } }); 源代码如下：<html> <head> <meta charset="UTF-8"> <title>人生倒计时</title> <style> body{background:linear-gradient(to right,#9796f0,#fbc7d4);color:#333;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Muli';height:100vh;margin:0}.reviews-container{background-color:#fff;border-radius:5px;box-shadow:0 3px 10px -5px rgba(0,0,0,0.3);padding:20px}.review{color:#777;padding:10px 10px 20px 10px;font-size:14px}.progress{background-color:rgba(100,100,100,0.2);border-radius:5px;position:relative;height:10px;width:200px;margin-right:50px;margin-top:10px}.progress-done{background:linear-gradient(to left,#f2709c,#ff9472);box-shadow:0 3px 3px -5px #f2709c,0 2px 5px #f2709c;border-radius:5px;height:10px;transition:width 2s ease .3s;animation:barberpole 9s linear infinite;background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:40px 40px}@keyframes barberpole{from{background-position:0 0}to{background-position:500px 0}}.percent{color:#333;float:right;margin-top:-14px}.social-panel-container{position:fixed;right:0;bottom:80px;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-10px)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,0.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none} </style> </head> <body> <div class="reviews-container"> <h2>人生倒计时</h2> <div class="review time"> <span class="icon-container"></span> <div class="progress"> <div class="progress-done" data-done=""></div> </div> <span class="percent"></span> </div> <div class="review week"> <span class="icon-container"></span> <div class="progress"> <div class="progress-done" data-done=""></div> </div> <span class="percent"></span> </div> <div class="review month"> <span class="icon-container"></span> <div class="progress"> <div class="progress-done" data-done=""></div> </div> <span class="percent"></span> </div> <div class="review year"> <span class="icon-container"></span> <div class="progress"> <div class="progress-done" data-done=""></div> </div> <span class="percent"></span> </div> <div class="review festival"> <span class="icon-container"></span> <div class="progress"> <div class="progress-done" data-done=""></div> </div> <span class="percent"></span> </div> </div> <script> const hh = new Date().getHours(),mm = new Date().getMinutes(),hhmmt = hh + '.' + mm; document.querySelector('.time .icon-container').innerText = '今天已过去 ' + hh + ' 小时'; document.querySelector('.time .progress-done').setAttribute("data-done", parseInt(hhmmt/24*100)); document.querySelector('.time .percent').innerText = parseInt(hhmmt/24*100) + '%'; dd = new Date().getDay(); if(dd==0){dd=7}; document.querySelector('.week .icon-container').innerText = '本周已过去 ' + dd + ' 天'; document.querySelector('.week .progress-done').setAttribute("data-done", parseInt(dd/7*100)); document.querySelector('.week .percent').innerText = parseInt(dd/7*100) + '%'; const md = new Date().getDate(),months = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate(); document.querySelector('.month .icon-container').innerText = '本月已过去 ' + md + ' 天'; document.querySelector('.month .progress-done').setAttribute("data-done", parseInt(md/months*100)); document.querySelector('.month .percent').innerText = parseInt(md/months*100) + '%'; const yy = new Date().getMonth(); document.querySelector('.year .icon-container').innerText = '今年已过去 ' + yy + ' 个月 零 ' + md + ' 天'; document.querySelector('.year .progress-done').setAttribute("data-done", parseInt(yy/12*100)); document.querySelector('.year .percent').innerText = parseInt(yy/12*100) + '%'; const d1="2023/01/22 00:00:00"; const dateBegin = new Date(d1); const dateEnd = new Date(); const dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数 const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数 const leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数 const hours=Math.floor(leave1/(3600*1000))//计算出小时数 const dayDifft = 365+dayDiff; document.querySelector('.festival .icon-container').innerText = '离春节还有' + Math.abs(dayDiff) + '天' +Math.abs(hours)+'时'; document.querySelector('.festival .progress-done').setAttribute("data-done", parseInt(dayDifft/365*100)); document.querySelector('.festival .percent').innerText = parseInt(dayDifft/365*100) + '%'; const progressDone = document.querySelectorAll('.progress-done'); progressDone.forEach(progress => { progress.style.width = progress.getAttribute('data-done') + '%'; if(progress.getAttribute('data-done')<=100 && progress.getAttribute('data-done')>80){ progress.style.backgroundColor = "#d9534f"; progress.style.boxShadow = "-2px 2px 5px 0px #d9534f"; } if(progress.getAttribute('data-done')<=80 && progress.getAttribute('data-done')>60){ progress.style.backgroundColor = "#f0ad4e"; progress.style.boxShadow = "-2px 2px 5px 0px #f0ad4e"; } if(progress.getAttribute('data-done')<=60 && progress.getAttribute('data-done')>40){ progress.style.backgroundColor = "#5bc0de"; progress.style.boxShadow = "-2px 2px 5px 0px #5bc0de"; } if(progress.getAttribute('data-done')<=40 && progress.getAttribute('data-done')>20){ progress.style.backgroundColor = "#5cb85c"; progress.style.boxShadow = "-2px 2px 5px 0px #5cb85c"; } if(progress.getAttribute('data-done')<=20 && progress.getAttribute('data-done')>=0){ progress.style.backgroundColor = "#5cb85c"; progress.style.boxShadow = "-2px 2px 5px 0px #5cb85c"; } }); </script> </body> </html>{message type="info" content="这只是一个单独的HTML页面，如果要运用到自己的网站美化，可自行修改"/}
