当前位置：首页代码正文

HTML渲染网页缩略图示例

2023-07-12 (小众派官方更新于 2023-07-12) 代码

使用sitejabber的缩略图输出。

提供输入框和提交按钮。非网址或域名无法提交。填入域名后提交自动输出图片，下载按钮无效果，点击后图片可自动打开。
下面是单网址输入代码：

<!DOCTYPE html>
<html>
<head>
<title>网页示例1</title>
</head>
<body>

<input id="urlInput" type="text" />
<button id="submitBtn" disabled>提交</button>
<div id="result"></div>

<script>

function getDomain(url) {
let domain = url.replace(/^https?:\/\//, '');
domain = domain.split('/')[0];
domain = domain.replace(/^www\./, '');
return domain;
}

function getBusinessName(domain) {
const index = domain.indexOf('.');
const name = domain.substring(0, index);
let variable1 = name[0];
return {
name: name,
variable1: variable1
};
}

function generateImgUrl(businessName, domain) {
const {name, variable1} = businessName;
const variable2 = domain.substring(0, 3);
return `https://static.sitejabber.com/img/websites/${variable1}/${variable2}/${domain}-desktop@2x.jpg`;
}

function checkInput(input) {
let urlPattern = /^https?:\/\//;
let domainPattern = /^\w+\.\w+$/;
return urlPattern.test(input) || domainPattern.test(input);
}

const urlInput = document.getElementById('urlInput');
const submitBtn = document.getElementById('submitBtn');
const resultDiv = document.getElementById('result');

urlInput.addEventListener('input', () => {
submitBtn.disabled = !checkInput(urlInput.value);
});

submitBtn.addEventListener('click', () => {
const url = urlInput.value;
if (!checkInput(url)) {
alert('请输入一个合法的 URL 或域名!');
return;
}

const domain = getDomain(url);
const businessName = getBusinessName(domain);
const imgUrl = generateImgUrl(businessName, domain);

resultDiv.innerHTML = `<img src="${imgUrl}" /> <a href="${imgUrl}" download="${domain}.jpg">下载</a>`;

});
</script>
</body>
</html>

下面是单网址输入代码：

<!DOCTYPE html>
<html>
<head>
<title>网页示例2</title>
</head>
<body>

<textarea id="urlInput" rows="4"></textarea>

<button id="submitBtn" disabled>提交</button>
<div id="result"></div>

<script>

function getDomain(url) {
let domain = url.replace(/^https?:\/\//, '');
domain = domain.split('/')[0];
domain = domain.replace(/^www\./, '');
return domain;
}

function getBusinessName(domain) {
const index = domain.indexOf('.');
const name = domain.substring(0, index);
let variable1 = name[0];
return {
name: name,
variable1: variable1
};
}

function generateImgUrl(businessName, domain) {
const {name, variable1} = businessName;
const variable2 = domain.substring(0, 3);
return `https://static.sitejabber.com/img/websites/${variable1}/${variable2}/${domain}-desktop@2x.jpg`;
}

function checkInput(input) {
let urlPattern = /^https?:\/\//;
let domainPattern = /^\w+\.\w+$/;
return urlPattern.test(input) || domainPattern.test(input) || input.includes('\n');
}

const urlInput = document.getElementById('urlInput');
const submitBtn = document.getElementById('submitBtn');
const resultDiv = document.getElementById('result');

urlInput.addEventListener('input', () => {
const value = urlInput.value;
submitBtn.disabled = !checkInput(value);
});

submitBtn.addEventListener('click', () => {

const inputs = urlInput.value.split('\n');

let html = '';

inputs.forEach(input => {
if (!checkInput(input)) {
alert('请输入合法的 URL 或域名!');
return;
}

const url = input;
const domain = getDomain(url);
const businessName = getBusinessName(domain);
const imgUrl = generateImgUrl(businessName, domain);

html += `<img height="100px;" width="100px;" src="${imgUrl}" /> <a href="${imgUrl}" download="${domain}.jpg">下载</a><br>`;
});

resultDiv.innerHTML = html;

});
</script>
</body>
</html>

0

每日签到
返回顶部

";s:2:"js";s:114:"