2. 技术交流
  3. CHATGPT写代码系列1：网页里简单的消息弹窗效果

CHATGPT写代码系列1：网页里简单的消息弹窗效果

finn 2023-10-13 821 
class Message {
  constructor() {
    this.container = document.createElement('div');
    this.container.id = 'messageContainer';
    this.container.style.cssText = 'position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 9999;';
    document.body.appendChild(this.container);
  }
  show(message, iconType) {
    const p = document.createElement('p');
    p.style.cssText = 'margin: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transform: translateZ(10px);';
    let icon;
    if (iconType === 'tick') {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: green; border-radius: 50%; margin-right: 10px;';
      icon.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 16.2l-3.6-3.6c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L9 11.6l6.2-6.2c.8-.8 2-.8 2.8 0s.8 2 0 2.8L11.8 16.2c-.4.4-.8.6-1.3.6-.5 0-.9-.2-1.3-.6z" fill="white"></path></svg>';
    } else {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: green; border-radius: 50%; margin-right: 10px;';
    }
    p.appendChild(icon);
    const text = document.createTextNode(message);
    p.appendChild(text);
    this.container.appendChild(p);
    setTimeout(() => {
      this.container.removeChild(p);
    }, 3000);
  }
}

// 使用示例
const message = new Message();
message.show('这是一条消息提示');
message.show('这是一条带图标和阴影的消息提示', 'tick');

按f12在控制台运行一下吧。感觉真棒

最新回复 (5)
  • finn 2023-10-13
    0 2楼 
    // ==UserScript==
// @name         Message提示框脚本
// @namespace    GM_Message
// @version      1
// @description  在网页上显示消息提示框，支持自定义图标和3D效果的白色方块背景。使用示例：GM_Message.show('这是一条消息提示', 'tick');
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==

class Message {
  constructor() {
    this.container = document.createElement('div');
    this.container.id = 'messageContainer';
    this.container.style.cssText = 'position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 9999;';
    document.body.appendChild(this.container);
  }
  show(message, iconType) {
    const p = document.createElement('p');
    p.style.cssText = 'margin: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transform: translateZ(10px);';
    let icon;
    if (iconType === 'tick') {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: green; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center;';
      icon.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align: middle;"><path d="M9 16.2l-3.6-3.6c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L9 11.6l6.2-6.2c.8-.8 2-.8 2.8 0s.8 2 0 2.8L11.8 16.2c-.4.4-.8.6-1.3.6-.5 0-.9-.2-1.3-.6z" fill="white"></path></svg>';
    } else {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: green; border-radius: 50%; margin-right: 10px;';
    }
    p.appendChild(icon);
    const text = document.createTextNode(message);
    p.appendChild(text);
    this.container.appendChild(p);
    setTimeout(() => {
      this.container.removeChild(p);
    }, 3000);
  }
}

// 将Message类绑定到GM对象上
GM_Message = new Message();

// 支持GM_Message.show()方法在网页上显示消息提示框
unsafeWindow.GM_Message = GM_Message;

// 添加样式
GM_addStyle(`
#messageContainer {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#messageContainer p {
  margin: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateZ(10px);
}
#messageContainer p span {
  width: 16px;
  height: 16px;
  background-color: green;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#messageContainer p span svg {
  fill: white;
  vertical-align: middle;
}
`);

    改成了油猴脚本

    控制台输入GM_Message.show('这是一条消息提示', 'tick')

  • finn 2023-10-13
    0 3楼

    强啊。还能多种效果

    调教AI写js和css感觉真不错，我还得学点基础才行，不然我都不会改代码



    // ==UserScript==// @name         Message提示框脚本// @namespace    GM_Message// @version      1// @description  在网页上显示消息提示框，支持自定义图标和3D效果的白色方块背景。使用示例：GM_Message.show('这是一条消息提示', 'tick');// @match        *://*/*// @grant        GM_addStyle// ==/UserScript==class Message {  constructor() {    this.container = document.createElement('div');    this.container.id = 'messageContainer';    this.container.style.cssText = 'position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 9999;';    document.body.appendChild(this.container);
  }  show(message, iconType) {    const p = document.createElement('p');
    p.style.cssText = 'margin: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transform: translateZ(10px);';    let icon;    if (iconType === 'tick') {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: green; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center;';
      icon.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align: middle;"><path d="M9 16.2l-3.6-3.6c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L9 11.6l6.2-6.2c.8-.8 2-.8 2.8 0s.8 2 0 2.8L11.8 16.2c-.4.4-.8.6-1.3.6-.5 0-.9-.2-1.3-.6z" fill="white"></path></svg>';
    } else if (iconType === 'cross') {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: red; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center;';
      icon.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align: middle;"><path d="M12 10.6l4.6-4.6c.8-.8 2-.8 2.8 0s.8 2 0 2.8L14.8 12l4.6 4.6c.8.8.8 2 0 2.8s-2 .8-2.8 0L12 13.2l-4.6 4.6c-.8.8-2 .8-2.8 0s-.8-2 0-2.8L9.2 12 4.6 7.4c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L12 10.6z" fill="white"></path></svg>';
    } else if (iconType === 'info') {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: blue; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center;';
      icon.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align: middle;"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm1-9h-2v6h2v-6zm0-4h-2v2h2V7z" fill="white"></path></svg>';
    } else if (iconType === 'warning') {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: orange; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center;';
      icon.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align: middle;"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zM11 7h2v7h-2V7zm0 9h2v2h-2v-2z" fill="white"></path></svg>';
    } else {
      icon = document.createElement('span');
      icon.style.cssText = 'width: 16px; height: 16px; background-color: green; border-radius: 50%; margin-right: 10px;';
    }
    p.appendChild(icon);    const text = document.createTextNode(message);
    p.appendChild(text);    this.container.appendChild(p);    setTimeout(() => {      this.container.removeChild(p);
    }, 3000);
  }
}// 将Message类绑定到GM对象上GM_Message = new Message();// 支持GM_Message.show()方法在网页上显示消息提示框unsafeWindow.GM_Message = GM_Message;// 添加样式GM_addStyle(`
#messageContainer {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#messageContainer p {
  margin: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateZ(10px);
}
#messageContainer p span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#messageContainer p span svg {
  fill: white;
  vertical-align: middle;
}
`);

    GM_Message.show('这是一条消息提示', 'tick')

    GM_Message.show('这是一条消息提示', 'cross')

    GM_Message.show('这是一条消息提示', 'info')

    GM_Message.show('这是一条消息提示', 'warning')


  • lcj21 2023-10-14
    0 4楼
    不错，学习了
  • tanzh 2023-10-14
    0 5楼
    不错不错，专业精神强
  • 光庆 2023-10-14
    0 6楼
    顶顶顶顶
返回
发新帖
作者最近主题：