做网站里面的内容,安康网站开发,中国seo第一人,图书馆网站建设公司在有些做某些网页中#xff0c;应用不想引用一些前端框架#xff0c;对于一些比较常用的插件可以纯手写实现 1、模态框
!DOCTYPE html
html
head
meta charsetUTF-8
titleWater Ripple Effect/title
style… 在有些做某些网页中应用不想引用一些前端框架对于一些比较常用的插件可以纯手写实现 1、模态框
!DOCTYPE html
html
head
meta charsetUTF-8
titleWater Ripple Effect/title
style.modal-container {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.4);}.modal-content {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 600px;}.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;cursor: pointer;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}.modal-btn {background-color: #4caf50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;}/style
/head
bodybutton idopen-modal-btn onclickopenModal()打开模态框/buttondiv idmodal-container classmodal-containerdiv classmodal-contentspan classclose onclickcloseModal()times;/spanh2模态框标题/h2p模态框的内容在这里。/pbutton classmodal-btn onclickcloseModal()关闭/button/div/divscriptfunction openModal() {document.getElementById(modal-container).style.display block;
}function closeModal() {document.getElementById(modal-container).style.display none;
}/script
/body
/html
2、呼吸灯
!DOCTYPE html
html
head
meta charsetUTF-8
titleWater Ripple Effect/title
stylebody {background-color: #000;}.ripple {margin: auto;margin-top: 5rem;width: 1rem;height: 1rem;border-radius: 50%;position:relative;animation: ripple 3s linear infinite;}.ripple::before,.ripple::after{content:;position:absolute;top:0;left:0;right:0;bottom:0;border-radius: 50%;animation:inherit;animation-delay:1s;}.ripple::after {animation-delay:2s;}keyframes ripple {0% {box-shadow: 0 0 0 .3rem var(--ripple-color);}100% {box-shadow: 0 0 0 8rem rgba(255,255,255, 0);}}
/style
/head
bodydiv classripple style--ripple-color: rgba(255,0,0, 0.2); background-color: red;/divdiv classripple style--ripple-color: rgba(0,255,0, 0.2); background-color: green;/divdiv classripple style--ripple-color: rgba(0,0,255, 0.2); background-color: blue;/divdiv classripple style--ripple-color: rgba(255,255,0, 0.2); background-color: yellow;/div
/body
/html
3、消息弹框
!DOCTYPE html
html
headtitle消息弹框示例/titlestyle.message-box {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;padding: 10px;border: 1px solid blue;border-radius: 5px;}/style
/head
bodybutton onclickshowMessage()显示消息/buttonscript// 创建一个函数来显示消息弹框function showMessage() {var equipment_name 设备XXX;// 创建一个新的元素来显示消息var messageElement document.createElement(div);messageElement.textContent equipment_name 没有生产数据;messageElement.classList.add(message-box);// 将消息元素添加到页面的body中document.body.appendChild(messageElement);// 设置一个定时器在一定时间后移除消息元素setTimeout(function() {document.body.removeChild(messageElement);}, 3000); // 3秒后移除消息元素}/script
/body
/html
4、跳转页
html
headmeta charsetUTF-8title跳转页面/titlestylebody {background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {text-align: center;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.message {font-size: 24px;margin-bottom: 20px;}.countdown {font-size: 48px;font-weight: bold;margin-bottom: 20px;}.redirect {font-size: 18px;}.redirect a {color: #007bff;text-decoration: none;}.btna {display: inline-block;padding: 10px 20px;background-color: #007bff;color: #fff;text-decoration: none;border-radius: 5px;transition: background-color 0.3s ease;}.btna:hover {background-color: #0056b3;}/style
/head
bodydiv classcontainerdiv classmessage该网站已迁移/divdiv classcountdown idcountdown3/divdiv classredirect马上跳转到 a hrefhttp://10.10.101.97:8079http://10.10.101.97:8079/a/div/brdiv classbtna hrefhttp://10.10.101.97:8079点击这里立即跳转/a/div/divscript// 倒计时跳转函数function countdown() {var countdownElement document.getElementById(countdown);var countdownValue parseInt(countdownElement.innerText);if (countdownValue 0) {countdownElement.innerText countdownValue - 1;setTimeout(countdown, 1000); // 每秒更新倒计时} else {window.location.href http://10.10.101.97:8079; // 跳转到指定网址}}// 页面加载时开始倒计时window.onload function() {setTimeout(countdown, 1000);};/script
/body
/html
