js大小写转换

TIAOTIAOtiaowa1 · 发表于 2022-12-29 11:16

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TIAOTIAOtiaowa1</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function a(){
alert("转换成功！");
document.getElementById("test").value = document.getElementById("test").value.toUpperCase();
}
function b(){
alert("转换成功！");
document.getElementById("test1").value = document.getElementById("test1").value.toLowerCase();
}
</script>
<BODY>
在这里输入小写,会自动转为大写:<br/><textarea style="border: #FF0000 1px solid; overflow: visible; color: black; font-size:20px;background-image: url(https://img03.sogoucdn.com/app/a/201025/7e65fdb5fd3ca37f2d2fc9b9eb64915d);width:800px;height:800px;opacity: 0.5" id=test  ></textarea><br/><button   onclick="a()" >点击我</button><br/>
在这里输入大写,会自动转为小写:<br/><textarea style="border: #FF0000 1px solid; overflow: visible; color: black; font-size:20px;background-image: url(https://img03.sogoucdn.com/app/a/201025/7e65fdb5fd3ca37f2d2fc9b9eb64915d);width:800px;height:800px;opacity: 0.5" id=test1  ></textarea><br/><button   onclick="b()" >点击我</button>
</BODY>
</HTML>

夸克逃逸 · 发表于 2022-12-29 12:37

给几个写代码的建议~一是重复的代码尽量只写一次，比如css代码和获取节点的代码；二是提示转换成功在后面转换之后再显示，这比较符合代码逻辑；三是文字尽量都用div等标签包含，不要直接暴露在body下，直接暴露也没问题但是不太美观~加油

yee1128 · 发表于 2022-12-29 13:31

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
    <TITLE>TIAOTIAOtiaowa1</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
        textarea {
            border: #FF0000 1px solid;
            overflow: visible;
            color: black;
            font-size: 20px;
            background-image: url(https://img03.sogoucdn.com/app/a/201025/7e65fdb5fd3ca37f2d2fc9b9eb64915d);
            width: 400px;
            height: 400px;
            opacity: 0.5
        }
    </style>
</HEAD>
<script>
    function a() {
        let value = document.getElementById("test").value
        value = value.toUpperCase();
        console.log('value', value);
        if (value !== "") {
            alert(`转换成功！转换结果为：${value}`);
        } else {
            alert("输入字符为空，转换失败");
        }
    }
    function b() {
        let value = document.getElementById("test1").value
        value = value.toLowerCase();
        if (value !== "") {
            alert(`转换成功！转换结果为：${value}`);
        } else {
            alert("输入字符为空，转换失败");
        }
    }
</script>

<BODY>
    <div>在这里输入小写,会自动转为大写:</div><br /><textarea id=test></textarea><br /><button onclick="a()">点击我</button><br />
    <div>在这里输入大写,会自动转为小写:</div> <br /><textarea id=test1></textarea><br /><button onclick="b()">点击我</button>
</BODY>

</HTML>

按照一楼的大概改了一下，再加了个输入为空的判断

dofu05jj7uu · 发表于 2022-12-29 14:03

学习了。

野男人 · 发表于 2022-12-29 14:05

写个代参函数多好；想调哪个节点就调哪个节点

414269678 · 发表于 2022-12-29 14:37

[JavaScript] 纯文本查看 复制代码

function a() {
  transformValue("test");
}
function b() {
  transformValue("test1");
}

function transformValue(id) {
  const dom = document.getElementById("test1");
  if (!dom || !dom.value) return;
  const value = dom.value.toLowerCase();
  if (value !== "") alert(`转换成功！转换结果为：${value}`);
  else alert("输入字符为空，转换失败");
}

RainPPR · 发表于 2022-12-29 16:30

能不能提个建议，HTML、HEAD、BODY、TITLE、META能不能不大行啊，再一看script，强迫症都犯了
突然想到，你这段代码，不就是大小写转换的吗？

你懂了吗？

TIAOTIAOtiaowa1 · 发表于 2022-12-30 10:18

RainPPR 发表于 2022-12-29 16:30
能不能提个建议，HTML、HEAD、BODY、TITLE、META能不能不大行啊，再一看script，强迫症都犯了
突然想到， ...

主要就是用这个代码转一下这个代码

w460270218 · 发表于 2022-12-30 23:41

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>TIAOTIAOtiaowa1</title>
    <meta name="Generator" content="EditPlus" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <style>
      textarea {
        border: #ff0000 1px solid;
        overflow: visible;
        color: black;
        font-size: 20px;
        background-image: url([url]https://img03.sogoucdn.com/app/a/201025/7e65fdb5fd3ca37f2d2fc9b9eb64915d[/url]);
        width: 400px;
        height: 400px;
        opacity: 0.5;
      }
    </style>
  </head>
  <script>
    let dataObj = {};
    Object.defineProperty(dataObj, "test", {
      get: function () {
        return 10;
      },
      set: function (newValue) {
        console.log(newValue);
        document.getElementById("test1").value = newValue;
      },
    });
    document.addEventListener("keyup", function (event) {
      dataObj.test = event.target.value.toUpperCase();
    });

    let dataObj2 = {};
    Object.defineProperty(dataObj2, "test1", {
      get: function () {
        return 10;
      },
      set: function (newValue) {
        console.log(newValue);
        document.getElementById("test").value = newValue;
      },
    });
    document.addEventListener("keyup", function (event) {
      dataObj2.test1 = event.target.value.toLowerCase();
    });
  </script>

  <body>
    <div>在这里输入小写,会自动转为大写:</div>
    <br /><textarea id="test"></textarea><br /><br />
    <div>在这里输入大写,会自动转为小写:</div>
    <br /><textarea id="test1"></textarea><br />
  </body>
</html>

出个双向数据绑定版本。

帐号		自动登录	找回密码
密码			注册[Register]

[学习记录] js大小写转换