一个HTA写的英文字母大小写转换小程序

最新推荐文章于 2022-06-28 00:01:34 发布

Leonard_Spark

最新推荐文章于 2022-06-28 00:01:34 发布

阅读量187

点赞数

分类专栏： JS HTA

本文链接：https://blog.csdn.net/zhshspark/article/details/116463343

版权

JS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTA

2 篇文章 0 订阅

订阅专栏

HTA可以简单的使用HTML+JS（或VBS，但是，Edge浏览器已经不支持VBS了）写一个看似是桌面应用的网页程序。非常nice，虽然兼容性有些问题，但还是可以用的。
以下代码可以作为一个框架，后续再附加其他功能，基于这种方式，几乎可以应用所有HTML5的特性，所有CSS进行美化。
最终的效果是这样的，有待美化，应用CSS，可以随心所欲
在这里插入图片描述
下面直接上代码了：
main.hta文件

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>String Convert Tool V1.0</title>
    <script type="text/javascript" src="./JS/main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">

    <!-- 下面这些HTA窗口样式的属性，需要把上面<meta http-equiv="X-UA-Compatible" content="ie=edge" />注释掉才能显现，这是兼容性问题 -->
    <HTA:APPLICATION
        APPLICATIONNAME="String Convert Tool" 
        BORDER="dialog" 
        BORDERSTYLE="complex" 
        CAPTION="yes"
        CONTEXTMENU="no"
        INNERBORDER="yes" 
        ID="oHTA" 
        ICON="#"
        MAXIMIZEBUTTON="no" 
        MINIMIZEBUTTON="no"
        NAVIGABLE="no"
        SCROLL="no" 
        SCROLLFLAT="no"
        SELECTION="no"
        SYSMENU="yes" 
        SINGLEINSTANCE="yes"
        SHOWINTASKBAR="yes"
        VERSION="1.0"
        WINDOWSTATE="normal"
    />
</head>

<body>
    <center>
        <div id="inputBox">
            <textarea cols="80" rows="10" id="txtPaste" placeholder="粘贴待转换的英文到这里..."></textarea>
        </div>
        <div id="buttonArea">            
            <button type="button" id="btnToUpper" onclick="funToUpper()">全部字母大写</button>
            <button type="button" id="btnToLower" onclick="funToLower()">全部字母小写</button>
            <button type="button" id="btnOnlyFirstCharUpper" onclick="funOnlyFirstCharUpper()">仅首字母大写</button>
            <button type="button" id="btnEachWordUpper" onclick="funEachWordUpper()">每个单词大写</button>
        </div>
        <div>
            <button type="button" id="btnClearPaste" onclick="funClearPaste()">清除所有内容</button>
            <button type="button" id="btnLeftTrim" onclick="funLeftTrim()">清除左侧空格</button>
            <button type="button" id="btnRightTrim" onclick="funRightTrim()">清除右侧空格</button>
            <button type="button" id="btnTrim" onclick="funTrim()">清除两侧空格</button>
        </div>

        <div>
            <textarea cols="80" rows="10" id="txtCopy" readonly placeholder="转换好的英文在这里..."></textarea>
        </div> 
        <div>
            <button type="button" id="btnCopyExit" onclick="funCopyExit()">拷贝并退出</button> 
        </div>
    </center>
    
    <!-- 当页面加载完毕后执行Paste，自动将剪切板中的内容Paste到文本框。 -->
    <script type="text/javascript"> 
        var obj=document.getElementById("txtPaste");
        obj.focus();
        document.execCommand("paste");
        funToUpper();
    </script>
</body>
</html>

main.js 文件中的代码如下，因为写着玩的，所以直接操作DOM了

//resize the window
window.resizeTo(700,450);

//自定义function方法，浏览器不支持trim
function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');
}

function myLeftTrim(x){
    return x.replace(/(^\s*)/g,'');
}

function myRightTrim(x){
    return x.replace(/(\s*$)/g,'');
}

//与画面相关的function
function funLeftTrim(){
    document.getElementById("txtCopy").value=myLeftTrim(document.getElementById("txtCopy").value);
}

function funRightTrim() {
    document.getElementById("txtCopy").value=myRightTrim(document.getElementById("txtCopy").value);
}

function funTrim() {
    document.getElementById("txtCopy").value=myTrim(document.getElementById("txtCopy").value);
}

function funClearPaste(){
    document.getElementById("txtPaste").value="";
    document.getElementById("txtCopy").value="";
}

function funToUpper() {
    var str=document.getElementById("txtPaste").value;
    document.getElementById("txtCopy").value=String(str).toUpperCase();
}

function funToLower() {
    var str=document.getElementById("txtPaste").value;
    document.getElementById("txtCopy").value=String(str).toLowerCase();
}

function funOnlyFirstCharUpper() {
    var str=myTrim(document.getElementById("txtPaste").value);
    if (String(str).length<1) {
        document.getElementById("txtCopy").value="";
    }
    else{
        document.getElementById("txtCopy").value=String(str).charAt(0).toUpperCase()+String(str).substring(1).toLowerCase();
    }    
}

function funEachWordUpper() {
    var str = myTrim(document.getElementById("txtPaste").value);
    if (String(str).length<1) {
        document.getElementById("txtCopy").value="";
        return;
    }
    
    var res=String(str).charAt(0).toUpperCase();
    for (var index = 1; index < String(str).length; index++) {
        if (String(str).charAt(index-1)==' ' || String(str).charAt(index-1)=='\n') {
            res+=String(str).charAt(index).toUpperCase();
        }else{
            res+=String(str).charAt(index);            
        }

    }
    document.getElementById("txtCopy").value= res;
}

function funCopyExit() {
    var obj=document.getElementById("txtCopy");   
    obj.select();
    document.execCommand("copy");
    window.close();
}

main.css里面的代码，留给美工人员吧！

* {
    padding: 0;
    margin: 0;
}

#btnCopyExit {
    height: 30px;
    margin-top: 10px;
}

Leonard_Spark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个HTA写的英文字母大小写转换小程序

HTA可以简单的使用HTML+JS（或VBS，但是，Edge浏览器已经不支持VBS了）写一个看似是桌面应用的网页程序。非常nice，虽然兼容性有些问题，但还是可以用的。以下代码可以作为一个框架，后续再附加其他功能，基于这种方式，几乎可以应用所有HTML5的特性，所有CSS进行美化。最终的效果是这样的，有待美化，应用CSS，可以随心所欲下面直接上代码了：main.hta文件<html><head> <meta charset="utf-8">
复制链接

扫一扫