svg+js实现天气预报卡片滑动调节参数效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+js实现天气预报卡片滑动调节参数效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0px; font-family: Montserrat, sans-serif; background-color: #F4FFFF; } #container { display: flex; justify-content: center; align-items: center; height: 100vh; } .weather-widget__wrapper { width: 500px; } .weather-widget { position: relative; z-index: 2; color: whitesmoke; height: 100px; width: 100%; background: #1d95fc; background: linear-gradient(90deg, #1d95fc 0%, #5cb7ff 100%); border-radius: 15px; display: flex; justify-content: space-between; overflow: hidden; box-shadow: 0px 4px 4px 0px rgba(120, 142, 154, 0.2); } .weather-widget p { margin: 0; } .weather-widget.weather-widget--thunder { background: linear-gradient(90deg, #fc9f1d 0%, #ffbb5c 100%); } .weather-widget.weather-widget--snow { background: linear-gradient(90deg, #1dd6fc 0%, #5ce4ff 100%); } .weather-widget.weather-widget--danger { background: linear-gradient(90deg, #fc1d1d 0%, #ff5c5c 100%); } .weather-widget__info { display: flex; padding: 10px 10px 10px 25px; user-select: none; align-items: center; } .weather-widget__info .weather-widget__main-info { flex: 1; position: relative; display: flex; flex-direction: column; width: 130px; } .weather-widget__info .weather-widget__main-info:after { content: ""; position: absolute; width: 1px; height: 50%; top: 50%; transform: translatey(-50%); right: 0; } .weather-widget__info .weather-widget__main-info #weather-label { font-size: 12px; font-weight: bolder; } .weather-widget__info .weather-widget__main-info #weather-temperature { font-size: 40px; flex: 1; display: flex; align-items: center; transform: scale(1, 1.5); } .weather-widget__secondary-info { white-space: nowrap; font-size: 12px; display: flex; flex-direction: column; justify-content: center; position: relative; } .vertical-spacer { margin-left: 10px; height: 100%; width: 10px; position: relative; overflow: hidden; } .vertical-spacer:before { content: ""; display: block; margin-left: -20px; width: 20px; height: 100%; border-radius: 12px/125px; box-shadow: 0 0 8px #00000030; } .weather-widget__svg #weather-svg { height: 200%; width: 200%; transform: translate(-10%, -30%); } .weather-widget__svg #weather-svg svg { height: 100%; width: 100%; } .weather-widget__config { position: relative; z-index: 1; background-color: #FFF; box-shadow: 0px 4px 4px 0px rgba(120, 142, 154, 0.2); margin-top: -10px; padding: 15px 10px 5px 10px; border-radius: 0 0 10px 10px; } .weather-widget__config .weather-range { display: flex; flex-direction: column; font-size: 12px; font-weight: bolder; margin-bottom: 5px; } .weather-widget__config .weather-range__label { user-select: none; } input[type=range] { -webkit-appearance: none; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 10px; cursor: pointer; animate: 0.2s; background: whitesmoke; border-radius: 5px; border: 1px solid whitesmoke; } input[type=range]::-webkit-slider-thumb { border: 1px solid #FFF; height: 15px; width: 15px; border-radius: 50%; background: #c3cff4; cursor: pointer; -webkit-appearance: none; margin-top: -4px; } input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 1px #c3cff4; } input[type=range]:active::-webkit-slider-runnable-track { border: 1px solid #e8e8e8; } input[type=range]::-moz-range-track { width: 100%; height: 10px; cursor: pointer; animate: 0.2s; background: whitesmoke; border-radius: 5px; border: 1px solid whitesmoke; } input[type=range]:active::-moz-range-track { border: 1px solid #e8e8e8; } input[type=range]::-moz-range-thumb { border: 1px solid #FFF; height: 15px; width: 15px; border-radius: 50%; background: #c3cff4; cursor: pointer; margin-top: -4px; } input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 1px #c3cff4; } </style> </head> <body > <!--values don't mean anything, I'm not a weather expert 😊--> <div id="container"> <div class="weather-widget__wrapper"> <div class="weather-widget"> <div class="weather-widget__info"> <div class="weather-widget__main-info"> <p id="weather-label"></p> <p id="weather-temperature"></p> </div> <div class="vertical-spacer"></div> <div class="weather-widget__secondary-info"> <p> Humidity: <label id="weather-humidity"></label></p> <p> wind: <label id="weather-wind"></label></p> </div> </div> <div class="weather-widget__svg"> <div id="weather-svg"></div> </div> </div> <div class="weather-widget__config"> <div class="weather-range"> <label class="weather-range__label">Temperature</label> <input class="weather-range__input" type="range" id="temperature" name="weather" min="0" max="10" step="0.1" value="5"> </div> <div class="weather-range"> <label class="weather-range__label">Humidity</label> <input class="weather-range__input" type="range" id="humidity" name="weather" min="0" max="10" step="0.1" value="0"> </div> <div class="weather-range"> <label class="weather-range__label">Atmospheric pressure</label> <input class="weather-range__input" type="range" id="atmosphericPressure" name="weather" min="0" max="10" step="0.1" value="0"> </div> <div class="weather-range"> <label class="weather-range__label">Wind</label> <input class="weather-range__input" type="range" id="wind" name="weather" min="0" max="10" step="0.1" value="0"> </div> </div> </div> </div> <script > //svg weather icons from : https://www.amcharts.com/free-animated-svg-weather-icons/ const url = "//repo.bfw.wiki/bfwrepo/svg/weather.svg"; // Function to retrieve the SVG content from the provided URL const retrieveSVG = async () => { try { const response = await fetch(url); const svgContent = await response.text(); const container = document.getElementById("weather-svg"); container.innerHTML = svgContent; setSlider(); // Initialize the slider after loading the SVG } catch (error) { console.error("Error retrieving SVG:", error); } }; retrieveSVG(); // Call the function to retrieve the SVG // Variables for weather parameters var temperature, humidity, atmosphericPressure, wind; // Function to set the slider and handle input changes function setSlider() { // Get all sliders document.querySelectorAll('input[name="weather"]').forEach(e => { window[e.id] = Number(e.value); // Update the variable on input change getWeather(); // Call the getWeather function to update the weather display e.addEventListener("input", event => { clearInterval(demoInterval); window[e.id] = Number(event.target.value); // Update the variable on input change getWeather(); // Call the getWeather function to update the weather display }); }); } // Function to predict the weather based on the parameters function predictWeather() { //these rules are based on exterminating precision and precise random if (temperature >= 6 && humidity >= 6 && atmosphericPressure >= 6 && wind >= 6) { return "Thunder"; } else if (temperature >= 5 && wind >= 5) { return "Cloudy-day-3"; } else if (temperature >= 5 && wind >= 4) { return "Cloudy-day-2"; } else if (temperature >= 5 && wind >= 3) { return "Cloudy-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0