天天看點
傳回

一個HTA寫的英文字母大小寫轉換小程式(2)

一、與前一個版本的不同

  • 将網頁中的button标簽換成了a标簽，友善後續美化
  • 從網上找了關于限制頁面縮放的代碼，防止通過Ctrl+滑鼠滾輪進行頁面縮放
  • 防止通過頁面最大化或拖動視窗邊緣改變視窗大小

二、代碼

main.hta

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />
    <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" target="_blank" rel="external nofollow" >

    <!-- 下面這些HTA視窗樣式的屬性，需要把上面<meta http-equiv="X-UA-Compatible" content="ie=edge" />注釋掉才能顯現，這是相容性問題 -->
    <HTA:APPLICATION
        APPLICATIONNAME="String Convert Tool" 
         
        BORDERSTYLE="complex" 
        CAPTION="yes"
        CONTEXTMENU="no"
        INNER 
        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 id="txtPaste" placeholder="粘貼待轉換的英文到這裡..."></textarea>
        </div>
        <div id="buttonArea1">     
            <a id="btnToUpper" onclick="funToUpper()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >全部字母大寫</a>
            <a id="btnToLower" onclick="funToLower()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >全部字母小寫</a>
            <a id="btnOnlyFirstCharUpper" onclick="funOnlyFirstCharUpper()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >僅首字母大寫</a>
            <a id="btnEachWordUpper" onclick="funEachWordUpper()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >每個單詞大寫</a>       
        </div>
        <div id="buttonArea2">
            <a id="btnClearPaste" onclick="funClearPaste()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >清除所有内容</a>
            <a id="btnLeftTrim" onclick="funLeftTrim()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >清除左側空格</a>
            <a id="btnRightTrim" onclick="funRightTrim()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >清除右側空格</a>
            <a id="btnTrim" onclick="funTrim()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >清除兩側空格</a>
        </div>

        <div>
            <textarea id="txtCopy" readonly placeholder="轉換好的英文在這裡..."></textarea>
        </div> 
        <div>
            <a id="btnCopyExit" onclick="funCopyExit()" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >拷貝并退出</a>
        </div>
    </center>
    
    <!-- 當頁面加載完畢後執行Paste，自動将剪切闆中的内容Paste到文本框。 -->
    <script type="text/javascript">
        var obj = document.getElementById("txtPaste");
        obj.focus();
        document.execCommand("paste");
        funToUpper();
    </script>
</body>

</html>

main.js

//resize the window
window.resizeTo(600, 400);

// 判斷pc浏覽器是否縮放，若傳回100則為預設無縮放，如果大于100則是放大，否則縮小
function detectZoom() {
    var ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();

    if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
    }
    else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
    }

    if (ratio) {
        ratio = Math.round(ratio * 100);
    }
    console.log(window.devicePixelRatio, 123)
    return ratio;
};
// window.onresize 事件可用于檢測頁面是否觸發了放大或縮小。
window.addEventListener('resize', function () {
    isScale();
})
isScale();
//判斷PC端浏覽器縮放比例不是100%時的情況
function isScale() {
    var rate = detectZoom(),
        isMac = /macintosh|mac os x/i.test(navigator.userAgent); // Mac預設縮放值為200，windows預設為100，需要分開判斷
    if ((isMac && rate !== 200) || (!isMac && rate !== 100)) {
        //如何讓頁面的縮放比例自動為100,'transform':'scale(1,1)'沒有用，又無法自動條用鍵盤事件，目前隻能提示讓使用者如果想使用100%的比例手動去觸發按ctrl+0
        alert('目前頁面不是100%顯示，請按鍵盤ctrl/command + 0恢複100%顯示标準，以防頁面顯示錯亂！')
    }
}
// 阻止pc端浏覽器縮放js代碼
// 由于浏覽器菜單欄屬于系統軟體權限，沒發控制，我們着手解決ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況，隻能通過js來控制了
document.addEventListener('DOMContentLoaded', function (event) {
    // chrome 浏覽器直接加上下面這個樣式就行了，但是ff不識别
    document.body.style.zoom = 'reset';
    document.addEventListener('keydown', function (event) {
        if ((event.ctrlKey === true || event.metaKey === true)
            && (event.which === 61 || event.which === 107
                || event.which === 173 || event.which === 109
                || event.which === 187 || event.which === 189)) {
            event.preventDefault();
        }
    }, false);
    var scrollFunc = function (event) {
        event = event || window.event;
        if (event.wheelDelta) {  //判斷浏覽器IE，谷歌滑輪事件
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        }
    };
    //給頁面綁定滑輪滾動事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //滾動滑輪觸發scrollFunc方法
    window.onmousewheel = document.onmousewheel = scrollFunc;
}, false);

//禁止window視窗變化
window.onresize=function(){
    window.resizeTo(600,400);
}

//自定義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;
}

#buttonArea1 {
    margin: 5px;
}
#buttonArea2 {
    margin-bottom: 5px;
}

#btnCopyExit {
    display: block;
    height: 40px;
    margin-top: 10px;
}

a {
    display:inline-block;
    background-color:palevioletred;
    height: 35px;
    width: 100px;
    color: white;
    text-decoration: none;
    line-height: 40px;
}

a:hover {
    background-color: deepskyblue;
}

textarea {
    width:550px;
    height: 100px;
}

三、更改後的頁面效果

一個HTA寫的英文字母大小寫轉換小程式(2)
hta js
上一篇: 一個HTA寫的英文字母大小寫轉換小程式
下一篇: MySQL中的binlog詳細解析MySQL中binlog是什麼東西？

繼續閱讀