这是一个简单而实用的在线大小写转换工具。它允许用户输入任意文本,并提供三种转换选项:转换为全大写、全小写或首字母大写。

使用这个工具非常简单快捷。用户只需要在输入框中输入想要转换的文本,选择合适的转换类型,然后点击"转换"按钮即可。转换结果会立即显示在输出框中,用户可以直接复制使用。

点击查看代码 
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>英文字母大小写在线转换工具-丢塔游戏网</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      margin: 0;

      padding: 20px;

    }

    h1 {

      text-align: center;

    }

    .container {

      max-width: 600px;

      margin: 0 auto;

    }

    .input-section,

    .output-section {

      margin-bottom: 20px;

    }

    label {

      display: block;

      margin-bottom: 5px;

    }

    textarea {

      width: 100%;

      height: 150px;

      padding: 10px;

      font-size: 16px;

      border: 1px solid #ccc;

      border-radius: 4px;

    }

    select {

      width: 100%;

      padding: 10px;

      font-size: 16px;

      border: 1px solid #ccc;

      border-radius: 4px;

    }

    button {

      display: block;

      width: 100%;

      padding: 10px;

      font-size: 16px;

      background-color: #4CAF50;

      color: white;

      border: none;

      border-radius: 4px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <h1>英文字母大小写在线转换工具</h1>

  <div class="container">

    <div class="input-section">

      <label for="input-text">输入文本:</label>

      <textarea id="input-text"></textarea>

    </div>

    <div class="conversion-section">

      <label for="conversion-type">选择转换类型:</label>

      <select id="conversion-type">

        <option value="uppercase">转换为大写</option>

        <option value="lowercase">转换为小写</option>

        <option value="titlecase">转换为首字母大写</option>

      </select>

      <button id="convert-button">转换</button>

    </div>

    <div class="output-section">

      <label for="output-text">转换结果:</label>

      <textarea id="output-text" readonly></textarea>

    </div>

  </div>

  <script>

    const inputText = document.getElementById('input-text');

    const conversionType = document.getElementById('conversion-type');

    const convertButton = document.getElementById('convert-button');

    const outputText = document.getElementById('output-text');

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

      const input = inputText.value;

      const type = conversionType.value;

      let output;

      switch (type) {

        case 'uppercase':

          output = input.toUpperCase();

          break;

        case 'lowercase':

          output = input.toLowerCase();

          break;

        case 'titlecase':

          output = input.replace(/\b\w/g, (char) => char.toUpperCase());

          break;

        default:

          output = input;

      }

      outputText.value = output;

    });

  </script>

</body>

</html>

直接保存为html代码就可以直接使用了。

最近翻译外文用到这个小工具，感觉用处还可以。

这种小工具网上挺多的，自己搞一个省的去找，体验：http://diuta.com/app/zt.html

大佬有好建议意见可以分享一下

英文单词字母大小写在线转换工具html代码的更多相关文章

  1. Unicode编码解码在线转换工具

    // Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...

  2. es6转es5 在线转换工具

    es6转es5 在线转换工具 Babeljs es6console

  3. 实用在线小工具 -- JS代码压缩工具

        实用在线小工具 -- JS代码压缩工具 将JS代码进行压缩可以减少内存占用,下面链接是一个在线JS代码压缩工具,它将多余的空格和换行符压缩了. JS代码压缩工具链接:http://jspack ...

  4. MarkDown/Html在线转换（支持代码高亮，可复制到微信公众号、今日头条）

    MarkDown/Html在线转换能够将md渲染成html并且能保持代码高亮,可以方便的复制待格式的html粘贴到微信公众号,CSDN,简书,博客园,开源中国等. 扫码体验在线助手小程序 我是java ...

  5. yml格式的在线转换工具

    工具1: https://www.toolfk.com/tool-format-yaml 工具2: https://www.toyaml.com/index.html https://www.cnbl ...

  6. Java中字母大小写的转换

    例:String str = "AbC"; 把字符串所有字母变成小写: System.out.println(str.toLowerCase()); 把字符串所有字母大写: Sys ...

  7. unicode 编码在线转换工具

    字符串 unideo的16进制值  

  8. unicode 编码在线转换工具--javascript

    http://www.cnblogs.com/mq0036/p/4007452.html

  9. php 字母大小写转换的函数

    分享下,在php编程中,将字母大小写进行转换的常用函数. 1.将字符串转换成小写strtolower(): 该函数将传入的字符串参数所有的字符都转换成小写,并以小定形式放回这个字符串 2.将字符转成大 ...

  10. unicode 编码在线转换--javascript

    // unicode 编码在线转换工具--javascript 本人在网上搜索,看到有使用javascript做unicode编码转换的,感觉很好玩,所以拿来使用的. 这个功能有目前测试了两种: 1) ...

随机推荐

  1. sql 使用with 递归

     ---前提:有上下级关系的关系表  ---示例:组织架构表 DECLARE @orgId NVARCHAR(20)='0001'; --向下递归,查询@orgId 下的所有结点...包括儿子-孙子节 ...

  2. 【硬件】认识和选购DDR4内存

    2.3 认识和选购DDR4内存 内存又称为主存或内存储器,用于暂时存放CPU的运算数据和与硬盘等外部存储器交换的数据.在电脑工作过程中,CPU会把需要运算的数据调到内存中进行运算,运算完成后再将结果传 ...

  3. study Python3【3】的函数

    Python的函数定义简单,但灵活度非常大.功能强大意味复杂.为了复习,把廖雪峰老师的该课程做个回顾. 参数有:必选参数.默认参数.可变参数.关键字参数.命名关键字参数. 计算x的n次方函数: def ...

  4. Redis使用IO多路复用进行事件处理机制

    一.epoll多路复用 这里重点要说的就是redis的IO编程模型,首先了解下 为什么要有多路复用呢 ? 案例 引用知乎上一个高赞的回答来解释什么是I/O多路复用.假设你是一个老师,让30个学生解答一 ...

  5. python之request请求后响应的数据从中获取指定值

    request请求后响应的数据为字典类型,从中获取指定值 如上图,需要获取Code的值,或者Msg的值 首先把response通过内置json解码器解码输出 response =  response. ...

  6. Canvas、客户端、表单

    Canvas var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidt ...

  7. Spring编程式事务控制

    目录 Spring编程式事务控制 代码实现 测试 Spring编程式事务控制 实际中很少使用 代码实现 pom.xml <?xml version="1.0" encodin ...

  8. 为什么重写equals一定也要重写hashCode方法？

    简要回答 这个是针对set和map这类使用hash值的对象来说的 只重写equals方法,不重写hashCode方法: 有这样一个场景有两个Person对象,可是如果没有重写hashCode方法只重写 ...

  9. awk截取日志

    Posted on 2019-04-02 09:35 SZ_文彬 阅读(0) 评论(0)  编辑 收藏 好久没有截取nginx/haproxy 中 的日志了,竟有点不熟悉了. 记录一下,以免以后忘记. ...

  10. Vue3 组件通信方式小结

    也是零零散散用 vue3 来搞一些前端的页面, 每次在组件通信, 主要是传数据这块总是忘记, 大多无非父传子, 子传父等情况, 这里再来做一个小结. 父传子 Props 最常见的就是父组件给子组件传递 ...