1. (function() {
// 创建一个随机颜色函数
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 给除了body和html之外的所有元素添加随机背景渐变
function applyRandomGradientToElements() {
const allElements = document.querySelectorAll('u,i,small');
allElements.forEach(function(element) {
const color1 = getRandomColor();
const color2 = getRandomColor();
element.style.cssText += `
background-image: linear-gradient(to right, ${color1},${color2}) ;
-webkit-background-clip: text ;
color: transparent ;
`;
});
}
// 创建按钮并添加到页面中
const button = document.createElement('button');
button.textContent = '改变颜色';
document.body.appendChild(button);
// 给按钮添加点击事件
button.addEventListener('click', applyRandomGradientToElements);
})();
4. document.addEventListener('DOMContentLoaded', function() {
// 获取所有p元素
var pElements = document.querySelectorAll('p');
// 为每个p元素添加按钮
pElements.forEach(function(p, index) {
// 创建按钮
var button = document.createElement('button');
button.textContent = '点击将文字转换为图片并显示';
button.onclick = function() {
textToImage(p.innerText);
};
// 将按钮添加到p元素后面
p.parentNode.insertBefore(button, p.nextSibling);
});
function textToImage(text) {
// 创建canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置字体和填充颜色
var fontSize = 24; // 增加字体大小
ctx.font = fontSize + 'px Arial';
ctx.fillStyle = 'black';
// 处理文本，并支持换行
var textLines = text.split('\n');
var lineHeight = fontSize + 38; //2倍为4， 假设行高是字体大小加上一些额外空间
var maxWidth = 0;
// 计算最大宽度和总高度
textLines.forEach(function(line) {
var metrics = ctx.measureText(line);
if (metrics.width > maxWidth) {
maxWidth = metrics.width;
}
});
var totalHeight = textLines.length * lineHeight;
// 设置canvas的宽度和高度，并放大2倍以提高清晰度
var scale = 4; // 放大倍数
canvas.width = maxWidth * scale + 20 * scale; // 添加一些边距，并放大
canvas.height = totalHeight * scale + 20 * scale; // 添加一些边距，并放大
// 设置缩放比例
ctx.scale(scale, scale);
// 在canvas上绘制每一行文本
textLines.forEach(function(line, index) {
ctx.fillText(line, 10 / scale, (lineHeight * (index + 1)) / scale);
});
// 将canvas转换为图片
var imgData = canvas.toDataURL('image/png');
// 打开新窗口并设置窗口内容为图片
var newWindow = window.open();
newWindow.document.write('<img src="' + imgData + '" alt="Text as Image" style="width: ' + (canvas.width / scale) + 'px; height: ' + (canvas.height / scale) + 'px;" /><meta name="viewport" content="width=device-width,initial-scale=2"/>');
}
});
5.
document.addEventListener('DOMContentLoaded', function() {
// 获取所有details元素
var detailsElements = document.querySelectorAll('details');
// 为每个details元素添加按钮
detailsElements.forEach(function(details, index) {
// 获取对应的p元素和summary元素
var pElement = details.querySelector('p');
var summaryElement = details.querySelector('summary');
// 创建按钮
var button = document.createElement('button');
button.textContent = '点击将文字转换为图片并显示';
button.onclick = function() {
// 如果details元素没有展开，则展开它以获取p元素的内容
var wasOpen = details.open;
if (!wasOpen) {
details.open = true;
}
// 获取文本内容，并在summary后添加两个换行，同时用书名号包裹summary内容
var summaryText = '《' + summaryElement.innerText + '》\n\n';
var pText = pElement.innerText;
// 如果之前没有展开，现在将其关闭
if (!wasOpen) {
details.open = false;
}
// 调用函数生成图片
textToImage(summaryText, pText);
};
// 将按钮添加到details元素后面
details.parentNode.insertBefore(button, details.nextSibling);
});
function textToImage(summaryText, pText) {
// 创建canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置字体和填充颜色
var fontSize = 24; // 增加字体大小
ctx.font = fontSize + 'px Arial';
ctx.fillStyle = 'black';
// 处理文本，并支持换行
var textLines = (summaryText + pText).split('\n'); // 将summary文本作为第一行，并在其后添加两个换行
var lineHeight = fontSize + 10; // 假设行高是字体大小加上一些额外空间
var maxWidth = 0;
// 计算最大宽度和总高度
textLines.forEach(function(line) {
var metrics = ctx.measureText(line);
if (metrics.width > maxWidth) {
maxWidth = metrics.width;
}
});
// 设置canvas的宽度和高度，并放大2倍以提高清晰度
var scale = 2; // 放大倍数
canvas.width = maxWidth * scale + 20 * scale; // 添加一些边距，并放大
// 设置canvas的高度为文本行数乘以行高，并加上一些额外的边距
canvas.height = (textLines.length * lineHeight) * scale + 20 * scale; // 添加一些边距，并放大
// 设置缩放比例
ctx.scale(scale, scale);
// 在canvas上绘制每一行文本
textLines.forEach(function(line, index) {
ctx.fillText(line, 10 / scale, (lineHeight * (index + 1)) / scale);
});
// 将canvas转换为图片
var imgData = canvas.toDataURL('image/png');
// 打开新窗口并设置窗口内容为图片
var newWindow = window.open();
newWindow.document.write('<img src="' + imgData + '" alt="Text as Image" style="width: ' + (canvas.width / scale) + 'px; height: ' + (canvas.height / scale) + 'px;" /><meta name="viewport" content="width=device-width,initial-scale=2"/>');
}
});
6. <style>
/* 设置一些样式，让显示的文字更加明显 */
.text-popup {
position: absolute;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 0;
border-radius: 10px;
font-size: 16px;
pointer-events: none; /* 防止文本弹出层影响触摸事件 */
}
</style>
</head>
<body>
<script>
// 定义一个数组，包含要显示的不同文字
var texts = ["我", "我", "我", "我", "我", "我",];
// 初始化一个变量来记录当前显示的文字索引
var currentIndex = 0;
// 为整个文档添加触摸事件监听器
document.addEventListener("touchstart", function(e) {
// 创建一个新的元素来显示文字
var textPopup = document.createElement("div");
textPopup.classList.add("text-popup");
textPopup.textContent = texts[currentIndex];
// 设置文本弹出层的位置为触摸位置
textPopup.style.left = e.touches[0].clientX + 'px';
textPopup.style.top = e.touches[0].clientY + 'px';
// 将文本弹出层添加到文档中
document.body.appendChild(textPopup);
// 设置一个定时器来移除文本弹出层
setTimeout(function() {
document.body.removeChild(textPopup);
}, 10000); // 文字显示2秒后消失
// 更新索引，以便下次触摸时显示不同的文字
currentIndex = (currentIndex + 1) % texts.length;
});
</script>