Greasy Fork

休息一下

随机获取动漫和小仙女图片

当前为 2023-03-31 提交的版本,查看 最新版本

// ==UserScript==
// @name         休息一下
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  随机获取动漫和小仙女图片
// @author       wangkaixuan
// @match        http://.com
// @include *
// @grant        none
// @license      Apache
// ==/UserScript==
var show = 1;//可修改默认窗口状态,0为显示,1为隐藏
const animeButton = document.createElement('button');
const sceneryButton = document.createElement('button');
const beautyButton = document.createElement('button');
const spanp = document.createElement('span');
animeButton.innerText = '次元';
sceneryButton.innerText = '风景';
beautyButton.innerText = '解语花';
var imgsize=true;let htop = "https://";
// 创建图片
const randomImage = document.createElement('img');
randomImage.style.width = "300px";
randomImage.onclick =()=>{
    imgsize=!imgsize;
    randomImage.style.width =imgsize ? '300px' : '750px';
}
// 创建按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.style.position = 'fixed';
buttonContainer.style.top = '20px';
buttonContainer.style.right = '20px';
buttonContainer.style.height = "auto";
buttonContainer.style.backgroundColor = '#FFF';
buttonContainer.style.border = '1px solid #CCC';
buttonContainer.style.boxShadow = '0px 0px 6px 2px #F5F5F5 ';//乳白色
buttonContainer.style.borderRadius = '10px';
buttonContainer.style.padding = '10px';
buttonContainer.style.zIndex = '9999';
buttonContainer.style.transition = 'all 0.8s ease-out';
buttonContainer.onmousedown = (event) => {//利用冒泡优化代码
  const button = event.target.closest('button'); // 找到最近的button元素
  if (button) {
    button.style.filter = 'brightness(0.9)'; // 设置按钮亮度
  }
};
buttonContainer.onmouseup = (event) => {
  const button = event.target.closest('button');
    if (button) {
            button.style.filter = '';
    }
};
// 设置按钮的样式
const buttonStyle = `
  background-color: #F9A7B0;
  color: #FFF;
  border: none;
  padding: 10px;
  border-radius: 8px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow:4px 4px 5px #CCC
`;
animeButton.style = buttonStyle;
sceneryButton.style = buttonStyle;
beautyButton.style = buttonStyle;
spanp.innerText = `图片加载需要时间`
spanp.style.fontSize = "10px"; // 设置字体大小为 10px
spanp.style.color = "rgba(255, 192, 203, 0.9)"; // 设置颜色为粉色半透明
spanp.style.verticalAlign = "bottom"; // 将元素与底部对齐
// 设置按钮的单击事件
//let currentUrl = `https://www.dmoe.cc/random.php`; // 默认使用随机图片
let currentUrl = `${htop}api.yimian.xyz/img?type=head`;
function getRandomImage(url) {
  randomImage.src = url;
}
animeButton.onclick = () => {
  currentUrl = `${htop}www.dmoe.cc/random.php?t=${Date.now()}`; // 使用二次元图片
  getRandomImage(currentUrl);
};
sceneryButton.onclick = () => {
  currentUrl = `${htop}tu.ltyuanfang.cn/api/fengjing.php?t=${Date.now()}`; // 使用风景图片
  getRandomImage(currentUrl);
};
beautyButton.onclick = () => {
  currentUrl = `${htop}cdn.seovx.com/?mom=302&t=${Date.now()}`; // 使用图片
  getRandomImage(currentUrl);
};
// 将按钮和图片添加到容器中
buttonContainer.appendChild(animeButton);
buttonContainer.appendChild(sceneryButton);
buttonContainer.appendChild(beautyButton);
buttonContainer.appendChild(spanp);
buttonContainer.appendChild(randomImage);
document.body.appendChild(buttonContainer);
// 设置图片的样式
randomImage.style.display = 'block';
randomImage.style.marginTop = '20px';
randomImage.style.borderRadius = '10px';
randomImage.style.transition="all 0.4s linear";
randomImage.alt = "链接已失效"

const showbox = document.createElement('div');
const directionImage = document.createElement('div');
showbox.appendChild(directionImage);
buttonContainer.appendChild(showbox);
showbox.style = buttonStyle;
directionImage.style=`
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
border-left-color: white;
transition:all 0.4s linear;
`
showbox.style=`
    position:absolute;
    top:20px;
    left:-30px;
    background-color: #F9A7B0;
    padding: 10px;
    border-radius: 8px 0 0 8px;
    margin-right: 10px;
    cursor: pointer; `
function shows(){
    if(show){
    buttonContainer.style.right = '-325px';
    directionImage.style.transform = 'rotate(-180deg)'
    imgsize=true;
    randomImage.style.width ='300px'
    show=!show
    }else{
        buttonContainer.style.right = '20px';
    directionImage.style.transform = 'rotate(0deg)';
    show=!show
    }
}
showbox.onclick = () => {
getRandomImage(currentUrl)
shows()
};
shows()