https://matthewsworld.gitee.io/siger/ 船票设计发放学习方案！ · Issue #I9DHYU · 马修齐/HelloSpace |
您所在的位置：网站首页 › 船票设计图片 › https://matthewsworld.gitee.io/siger/ 船票设计发放学习方案！ · Issue #I9DHYU · 马修齐/HelloSpace |
https://matthewsworld.gitee.io/siger/ 船票设计发放学习方案！ · Issue #I9DHYU · 马修齐/HelloSpace
|
来自你的消息:
html 分栏 左边是 13% 右边是 87% 怎么写脚本 来自WeTab SIGer的消息:你可以使用HTML和CSS来实现这种分栏效果，而不需要脚本。下面是一个简单的示例： 分栏布局 .container { width: 100%; display: flex; } .left-column { width: 13%; background-color: #f0f0f0; /* 左侧背景颜色 */ } .right-column { width: 87%; background-color: #e0e0e0; /* 右侧背景颜色 */ }在这个示例中，.container 类定义了一个弹性盒子容器，.left-column 和 .right-column 分别定义了左右两个分栏，并且通过设置宽度的百分比来实现你所需要的宽度比例。 来自你的消息: BH1PGN.hellospace.cc 通天阁号飞船，目标：月球！ .container { width: 100%; display: flex; } .left-column { width: 6.5%; } .right-column { width: 93.5%; }    
这个静态页面，你帮我修改为动态，通过命令行 url ?=imgurl 传递到静态页，替换其中一个img 的 src 地址。 再增加一个页顶的输入框，用于输入 imgurl ，当提交或者默认回车后，刷新 命令行 增加 url ?=imgurl 来自WeTab SIGer的消息:要实现这样的动态页面，你需要使用一些 JavaScript 来处理 URL 参数，并且动态更新页面上的图片地址。下面是一个简单的示例： BH1PGN.hellospace.cc 通天阁号飞船，目标：月球！ .container { width: 100%; display: flex; } .left-column { width: 6.5%; } .right-column { width: 93.5%; }
请输入图片 URL：
提交
function updateImage() {
var imgUrl = document.getElementById("imgUrlInput").value;
var mainImage = document.getElementById("mainImage");
mainImage.src = imgUrl;
}
// 从 URL 获取参数
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// 获取并更新图片 URL
window.onload = function() {
var imgUrlParam = getParameterByName('url');
if (imgUrlParam) {
var mainImage = document.getElementById("mainImage");
mainImage.src = imgUrlParam;
}
};
这个示例中，我们添加了一个输入框和一个提交按钮，用于用户输入新的图片 URL。当用户点击提交按钮时，JavaScript 函数 updateImage() 将会获取输入框中的 URL，并更新页面上的图片。另外，我们还使用了 JavaScript 函数 getParameterByName() 来从 URL 中获取参数值，从而实现了通过 URL 参数传递图片 URL 并动态更新页面内容的功能。 |
【本文地址】