2019/0403/JQ事件動畫&股市&Usecase

前端JQ

鍵盤事件keyboardevent

keyUp keydown keypress

Html textarea 其實就像是asp.net的textbox

範例-鍵字計數

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    

    <p>您還可以輸入<span id="counter"></span>個字</p>
    <textarea id="memo" rows="6" cols="40" maxlength="100"></textarea>


    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        var maxLetter = 100;
        $('#counter').text(maxLetter);
        $('#memo').keyup(function () {
            //alert('aa');
            var memoLength = $('#memo').val().length;
            var msg = maxLetter - memoLength;

            $('#counter').text(msg);
        });
        
    </script>

</body>
</html>

JQ-Show/Hide顯示動作特效

利用事件觸發然後執行show/hide的動畫

可以藉由taggle觸發，但tagle做的事情侷限，例如無法三秒顯示、五秒隱藏。

做if改變標頭文本(隱藏/顯示)

JQ text()沒給參數為取值，有給為給值。

Call back function 把 function 寫在 taggle 的第二個參數，就能先fun1在fun2。但就不能使用this抓不到上層的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    
    <h2 id="shownews">顯示</h2>
    <div id="news">
        「于太」的老公是昔日經營地下網路簽賭，身家逾千億元的于國柱：他也是台中起家，跟當初所爆出林太的背景資料相符。說起于國柱，就不得不回顧過往他在台灣有多麼風起雲湧，雖然他的行事低調，不過2005年他在國道被綁，行凶的是曾經策劃多起巨額綁票、使用重型軍械與警方駁火的張錫銘。當時張錫銘綁架了于國柱，贖金獅子大開口開價新台幣40億元。

        于國柱曾被綁架，而且贖金高達新台幣40億元。（翻攝自三立新聞）
        張錫銘被逮，判無期徒刑。他因擁有重軍火與警方對峙而史上聞名。（翻攝自東森新聞）
        于國柱最初經營天王星賓果西餐廳，後又開了天蠍星賓果西餐廳及超級大賭場，並取得楊登魁經營的龍虎榜百家樂衛星賭場中部經營權、然後與友人合組天下科技公司，生產電腦式的賓果賭博軟體及機台；之後他前往對岸砸上億元經營寶盈線上運動賭博網站。

        全盛時期，于國柱日賺高達4億元，寶盈5年就賺了新台幣4000億元；另外，于國柱還曾在喝一杯咖啡的時間，就決定買了一輛700多萬元保時捷，並且把車子給老婆開，如此驚人手筆「寵妻」也成為台中車界傳奇。

        勝利進行DJ表演，于太在他身後的最佳觀賞位置。（翻攝自jenniferz_zgri IG）
        GD跟勝利都是于太（之前名為林太）的追星對象，也有一說她是為了GD才接近勝利。（翻攝自ruru15微博）
        于太身為賣力砸錢的超級粉絲，自然有不少親近他們的自拍合影。（翻攝自Burning Sun官網）
        至於為何于太會傳成林太？其一是因于國柱本身極為低調，除了行蹤連老婆都瞞，豪宅也裝了密密麻麻的監視器，跟鄰居更是互無往來。公司員工甚至不知他是老闆，有人找時，員工還回：「要找于先生！你等一下喔！我們公司沒有這個人！」
    </div>

    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#news').hide();

        //$('#shownews').click(function () {
        //    $('#news').show(5000);

        //});

        //字的變換與動畫同時執行
        //$('#shownews').click(function () {
        //    $('#news').toggle(3000);
        //    if ($(this).text() == "顯示")
        //        $(this).text("隱藏");
        //    else
        //        $(this).text("顯示");

        //});


        $('#shownews').click(function () {
            $('#news').toggle(3000, function () {
                if ($('#shownews').text() == "顯示")
                    $('#shownews').text("隱藏");
                else
                    $('#shownews').text("顯示");
            });


           

        });
    </script>

</body>
</html>

除了showhide，JQ還有其他動畫特效。

JQ-Slidedownuptaggle 動畫特效滑入出 …

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>

    <h2 id="shownews">顯示</h2>
    <div id="news">
        「于太」的老公是昔日經營地下網路簽賭，身家逾千億元的于國柱：他也是台中起家，跟當初所爆出林太的背景資料相符。說起于國柱，就不得不回顧過往他在台灣有多麼風起雲湧，雖然他的行事低調，不過2005年他在國道被綁，行凶的是曾經策劃多起巨額綁票、使用重型軍械與警方駁火的張錫銘。當時張錫銘綁架了于國柱，贖金獅子大開口開價新台幣40億元。

        于國柱曾被綁架，而且贖金高達新台幣40億元。（翻攝自三立新聞）
        張錫銘被逮，判無期徒刑。他因擁有重軍火與警方對峙而史上聞名。（翻攝自東森新聞）
        于國柱最初經營天王星賓果西餐廳，後又開了天蠍星賓果西餐廳及超級大賭場，並取得楊登魁經營的龍虎榜百家樂衛星賭場中部經營權、然後與友人合組天下科技公司，生產電腦式的賓果賭博軟體及機台；之後他前往對岸砸上億元經營寶盈線上運動賭博網站。

        全盛時期，于國柱日賺高達4億元，寶盈5年就賺了新台幣4000億元；另外，于國柱還曾在喝一杯咖啡的時間，就決定買了一輛700多萬元保時捷，並且把車子給老婆開，如此驚人手筆「寵妻」也成為台中車界傳奇。

        勝利進行DJ表演，于太在他身後的最佳觀賞位置。（翻攝自jenniferz_zgri IG）
        GD跟勝利都是于太（之前名為林太）的追星對象，也有一說她是為了GD才接近勝利。（翻攝自ruru15微博）
        于太身為賣力砸錢的超級粉絲，自然有不少親近他們的自拍合影。（翻攝自Burning Sun官網）
        至於為何于太會傳成林太？其一是因于國柱本身極為低調，除了行蹤連老婆都瞞，豪宅也裝了密密麻麻的監視器，跟鄰居更是互無往來。公司員工甚至不知他是老闆，有人找時，員工還回：「要找于先生！你等一下喔！我們公司沒有這個人！」
    </div>
    <hr />
    <input id="Button1" type="button" value="登入系統" />

    <fieldset id="login" style="width:250px">
        <legend>登入系統</legend>
        <table>
            <tr>
                <td>帳號</td>
                <td>
                    <input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>密碼</td>
                <td>
                    <input id="Password1" type="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2"><input id="Button1" type="button" value="登入" /></td>

            </tr>


        </table>


    </fieldset>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#news').hide();
        $('#login').hide();

        $('#shownews').click(function () {
            $('#news').slideDown(1500);

        });


        $('#Button1').click(function () {
            $('#login').slideToggle(1000);
        });
    </script>

</body>
</html>

JQ動畫特效淡入淡出 fadeinouttaggle

較特別的是多了 fadeto 可以依照秒數調整透明度

範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #thing{
            width:500px; height:500px;
            background-color:brown;
        }
    </style>
</head>
<body>


    <input id="Button1" type="button" value="登入系統" />

    <fieldset id="login" style="width:250px">
        <legend>登入系統</legend>
        <table>
            <tr>
                <td>帳號</td>
                <td>
                    <input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>密碼</td>
                <td>
                    <input id="Password1" type="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2"><input id="Button1" type="button" value="登入" /></td>

            </tr>


        </table>




    </fieldset>

    <input id="Button2" type="button" value="button" />
    <div id="thing">

    </div>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>

        $('#login').hide();

        $('#Button1').click(function () {
            $('#login').fadeToggle(2000);
        });

        $('#Button2').click(fadeShow);


        function fadeShow() {
            var n = Math.random();
            $('#thing').fadeTo(300, n);
            setTimeout(fadeShow,300);
        }
    </script>

</body>
</html>

JQ-CSS組合動畫特效

Container拿來當動畫場景(有第一場景第二場景…

重點

Position 位置

Absolute 相對

Relative 絕對

首先 CSS 先設定好

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #container{
            height:1100px;
            width:800px;
            position:relative;
        }
        #title {
            border: 3px solid white;
            background-color: black;
            color: white;
            font-size: 20pt;
            width: 450px;
            text-align: center;
            padding: 5px;
            top: 650px;
            left: 500px;
            font-weight: 900;
            font-family: 微軟正黑體;
            position: absolute;
        }
        #photo{
            position:absolute;
            left:-1200px;
        }
    </style>
</head>
<body>
    <div id="container">

        <img src="Desert.jpg" id="photo" />
        <p id="title">大漠風光</p>

    </div>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
       
    </script>

</body>
</html>

就像演戲一樣一開始道具跟人員都要就定位，

接下來就安排走位，

誰先進誰先出誰說啥台詞誰做啥動作…

但是難道要用js寫迴圈還是幀數嗎?

要省功夫當然用

帧数百度百科

JQ動畫專用函式animate

animate ({CSS’KEY’:’+=VALUE’},幀數,’幀數壘加方式Swim越來越大’)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #container{
            height:1100px;
            width:800px;
            position:relative;
        }
        #title {
            border: 3px solid white;
            background-color: black;
            color: white;
            font-size: 20pt;
            width: 450px;
            text-align: center;
            padding: 5px;
            top: 650px;
            left: 500px;
            font-weight: 900;
            font-family: 微軟正黑體;
            position: absolute;
        }
        #photo{
            position:absolute;
            left:-1200px;
        }
    </style>
</head>
<body>
    <div id="container">

        <img src="Desert.jpg" id="photo" />
        <p id="title">大漠風光</p>

    </div>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $('#title').hide();

        $('#photo').animate({ 'left': '+=1200' }, 2000, 'swing', function () {
            $('#title').fadeIn(1500, function () {
                $('#photo,#title').hide(2000);
            });
        });

    </script>

</body>
</html>

下集預告皮卡丘互動式動畫

題外話股市 ( 有人打工被退訓

5秒搓合集合競價(取低於底價但最高) 先進國家中只有中國跟台灣，

明年要改為逐筆交易，逐筆搓合。

對散戶影響?(網路太慢設備太慢)

股市禿鷹，高頻交易(1秒鐘萬筆以上，狙擊差價)

散戶心態必須改變不能掛現價，大戶跟法人要筆誰的速度快，畫面一定更不上，線上遊戲都會因為網路慢覺得Lag，那股式金融交易???

股票是經濟樣態的櫥窗，大概可以領先預測半年。

經濟好轉要升息，重貼現率。

不管有沒有投資股票，股市會牽動整個產業，厲害的國家則會牽動全球。

川普放話前會先放空，和緩的時候作多。

Yahoo App 你的生活情報入口tw.answers.yahoo.com

台灣股市現在是外資盤。

要去學一下會計，每股盈餘(大立光:光學，蘋果買單。eps霸繫摳)，違約交割，現金股利，大立光研發能量有成功，iphone做home鍵廠商後來就消失了，鴻海只做組裝但良率很高毛利率很低，代工就夠低了組裝更低，所以蘋果銷售好鴻海就會好，但關你啥事?鴻海沒賺錢，台灣gdp就會低，就會經濟緊縮，消費力降低，痛苦指數提高。大麥克指數，預測經濟(統計後的結果)。迷你裙指數。鰻魚飯指數。現在台股很奇怪，道瓊跌，但台股量縮價漲，感覺外資要拉高出貨。觀察股市可以看清經濟，看清權值股可以看公司。長期就投台灣50。期貨比台股早45分開盤，平倉完?賺賠。期貨1點45收盤。老師的策略有分當沖長期短期。設停損，市場反指標。基期低時進場，結果下市…

Use case 簡談

Use casewww.google.com

行為者actor&case

事件、功能、行動中

Actor不一定是人可能是系統

Actor只要會做Case的行為就要連起來，然後整理成不交錯。

Ex1.結帳裡面有哪個行為者，哪個動作。

use case不是在表達流程，而是行為者與動作有什麼關聯。

CASE關係有三種，UML新版圖才會表示關係。

include包含關係、extened延伸關係、genalization一般(繼承)關係，

元自於物件導向。

Ex3.

A包含B，A一定要用到B。

A延伸B，A某種情況使用B。(需要標註條件)

(買飲料在有甜心卡的情況下可以買一送一)

A一般B，具體的東西抽象化(一般化)。

雞(烤雞、火雞、母雞)結帳(付現、信用卡、貨到付款)

精準不精準是比較出來的

課本309頁

空箭頭實箭頭???

Ex2.提親

software ideas 畫圖軟體可以不用用滑鼠用鍵盤

Uml 13種圖都可以畫

流程圖與use case沒有對應關係，

Usecase要先畫才能產出??類別圖?循序圖(表達流程)? 341頁

有點不太懂

-------------------------------------------------------

環境圖與流程圖為需求分析

USECASE物件導向結構化的系統分析

Ermode系統分析資料塑模

流程塑模DFD 業界沒再用結果台銀在考??

塑模完會有產出物

這時系統設計-細節規格 (青蛙蟾蜍程式

PSM->換成程式碼

才開始實做編碼，資料庫按照規格開成資料表

編碼階段用物件導向不一定系統分析時要用物件導向的系統分析

Previous2019/0402/前端作業四-jQ應用轉換樣式&ASP.NET_FormView控制項-會員資料維護實例 Next2019/0408/安卓工作室_元件/布局基本end

Last updated 6 years ago

hashtag前端JQ

hashtag鍵盤事件keyboardevent

hashtag範例-鍵字計數

hashtagJQ-Show/Hide顯示動作特效

hashtagJQ-Slidedownuptaggle 動畫特效滑入出 …

hashtagJQ動畫特效淡入淡出 fadeinouttaggle

hashtag範例

hashtagJQ-CSS組合動畫特效

hashtag重點

hashtag首先 CSS 先設定好

hashtagJQ動畫專用函式animate

hashtag下集預告 皮卡丘互動式動畫

hashtag題外話 股市 ( 有人打工被退訓

hashtagUse case 簡談

hashtagEx1.結帳裡面有哪個行為者，哪個動作。

hashtaguse case不是在表達流程，而是行為者與動作有什麼關聯。

hashtagCASE關係有三種，UML新版圖才會表示關係。

hashtagEx3.

hashtagEx2.提親

hashtagsoftware ideas 畫圖軟體 可以不用用滑鼠用鍵盤

hashtag有點不太懂