lovecoding
/
w1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./babel.min.js"></script>
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById("root"));
    function App() {
      return (
        <div>
          <EmojiPicker />
        </div>
      )
    }
    class EmojiPicker extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          // 选中的表情索引，-1表示未选择
          selectedIndex: -1,
          // 悬停的表情索引，-1表示无悬停
          hoverIndex: -1
        };

        // 绑定事件处理函数
        this.handleSelect = this.handleSelect.bind(this);
        this.handleHover = this.handleHover.bind(this);
        this.handleLeave = this.handleLeave.bind(this);
        this.clearSelection = this.clearSelection.bind(this);
      }

      // 表情数据
      emojis = [
        { symbol: '😊', name: '开心' },
        { symbol: '😍', name: '爱慕' },
        { symbol: '😂', name: '大笑' },
        { symbol: '😢', name: '难过' },
        { symbol: '😠', name: '生气' },
        { symbol: '😲', name: '惊讶' },
        { symbol: '😴', name: '困倦' },
        { symbol: '🤔', name: '思考' }
      ];

      // 选择表情
      handleSelect(index) {
        this.setState({
          selectedIndex: index
        });
      }

      // 鼠标悬停表情
      handleHover(index) {
        this.setState({
          hoverIndex: index
        });
      }

      // 鼠标离开表情
      handleLeave() {
        this.setState({
          hoverIndex: -1
        });
      }

      // 清除选择
      clearSelection() {
        this.setState({
          selectedIndex: -1
        });
      }

      render() {
        const { selectedIndex, hoverIndex } = this.state;
        const selectedEmoji = selectedIndex !== -1 ? this.emojis[selectedIndex] : null;

        return (
          <div style={containerStyle}>
            <h2 style={titleStyle}>表情选择器</h2>

            {/* 表情选择区域 */}
            <div style={emojiGridStyle}>
              {this.emojis.map((emoji, index) => (
                <div
                  key={index}
                  onClick={() => this.handleSelect(index)}
                  onMouseEnter={() => this.handleHover(index)}
                  onMouseLeave={this.handleLeave}
                  style={{
                    ...emojiItemStyle,
                    // 选中或悬停时的样式
                    transform: (selectedIndex === index || hoverIndex === index)
                      ? 'scale(1.2)'
                      : 'scale(1)',
                    backgroundColor: selectedIndex === index ? '#e3f2fd' : 'transparent',
                    borderColor: selectedIndex === index ? '#2196F3' : '#eee'
                  }}
                >
                  <span style={emojiSymbolStyle}>{emoji.symbol}</span>
                  <span style={emojiNameStyle}>{emoji.name}</span>
                </div>
              ))}
            </div>

            {/* 选择结果 */}
            {selectedEmoji && (
              <div style={selectionResultStyle}>
                <p>你选择了：{selectedEmoji.symbol} {selectedEmoji.name}</p>
                <button
                  onClick={this.clearSelection}
                  style={clearButtonStyle}
                >
                  清除选择
                </button>
              </div>
            )}

            {!selectedEmoji && (
              <p style={instructionStyle}>请点击一个表情来表达你的心情</p>
            )}
          </div>
        );
      }
    }

    // 样式定义
    const containerStyle = {
      maxWidth: '600px',
      margin: '20px auto',
      padding: '20px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif',
      border: '1px solid #e0e0e0',
      borderRadius: '10px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
    };

    const titleStyle = {
      color: '#333',
      marginBottom: '25px'
    };

    const emojiGridStyle = {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: '15px',
      marginBottom: '25px'
    };

    const emojiItemStyle = {
      padding: '15px 10px',
      border: '1px solid #eee',
      borderRadius: '8px',
      cursor: 'pointer',
      transition: 'all 0.2s ease',
    };

    const emojiSymbolStyle = {
      fontSize: '32px',
      display: 'block',
      marginBottom: '5px'
    };

    const emojiNameStyle = {
      fontSize: '14px',
      color: '#666'
    };

    const selectionResultStyle = {
      padding: '15px',
      backgroundColor: '#f8f9fa',
      borderRadius: '8px',
      marginBottom: '10px'
    };

    const clearButtonStyle = {
      padding: '6px 12px',
      marginTop: '10px',
      backgroundColor: '#f44336',
      color: 'white',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
      fontSize: '14px'
    };

    const instructionStyle = {
      color: '#666',
      fontStyle: 'italic'
    };

    root.render(<App />);
  </script>
</body>

</html>