iT邦幫忙

0

請問怎麼樣才能讓網頁在顯示資料為某字串時顯示對話視窗

html 網頁製作 網頁排版 網頁製作 網頁 html html5 #html html教學
xxx65819 2021-09-14 18:29:00 ‧ 1321 瀏覽

  • 分享至 

  • xImage 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlphaBot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
	<script>
		function get_status() {
			$.get( "/light", function( data ) {
				var element = document.getElementById('status');
				element.innerHTML = data;
			});
		}
		var timeoutID = window.setInterval(( () => get_status() ), 1000);
	</script>
	<script>
		function get_fun() {
			$.get( "/tracking", function( st ) {
				var element = document.getElementById('track');
				element.innerHTML = st;
                if(st == "110/10/19")
                {
                    restart();
                }
			});
		}
		var timeoutID = window.setInterval(( () => get_fun() ), 1000);
	</script>
    <style type="text/css">
        .ts.segment {
            margin: 0 auto;
            width: 500px;
        }
        .button {
            border: 0 !important
        }
    </style>
    <script>
        function talk() {
            ts('#closableModal').modal("show")
        }
    </script>
    <script type="text/javascript">
        var dt = setInterval(function()
        {
            if(document.all)
            {
                document.getElementById("buttonid").click();
            }
            else
            {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("buttonid").dispatchEvent(e);
            }
        },2000)
        function stop()
        {
		    clearInterval(dt);
	    }
        function restart()
        {
            dt = setInterval(start,2000); 
        }
        </script>
</head>
<body>
    <button onclick="javascript:talk()" id = "buttonid"></button>
    <div class="ts modals dimmer">
        <dialog id = "closableModal" class="ts fullscreen modal" open>
            <div class="header">
                這是你嗎？
            </div>
            <div class="image content">
                <div class="ts medium image">
                    <img src="image.jpg">
                </div>
                <div class="description">
                    <div class="ts header">我們在照片中偵測到了你。</div>
                    <p>這張照片看起來裡面包含著你的人像，如果你願意的話我們可以自動將該照片發佈至 <a href="https://www.gravatar.com" target="_blank">gravatar</a> 並替換你原先的頭像。</p>
                    <p>你希望這麼做嗎？</p>
                </div>
            </div>
            <div class="actions">
                <button onclick="stop()" class="ts deny button">
                    不
                </button>
                <button onclick="stop()" class="ts positive button">
                    是的
                </button>
            </div>
        </dialog>
    </div>
    <div class="ts text container">
        <div class="ts segment">
            <p align="center"><nobr>姓名：</nobr><nobr id='status' align="center">輸入</nobr></p>
            <p align="center"><nobr>生日：</nobr><nobr id='track' align="center">輸入</nobr></p>
            <!-- / 底部附著按鈕群組 -->
        </div>
    </div>
</body>
</html>

想請問這個html網頁，我希望get_fun()的st是某字串時，自動觸發buttonid這個button執行talk()，顯示closableModal對話視窗，點擊"是的"或"不"就可關閉對話視窗，因為get_fun()的st隨時會變，當get_fun()的st再度為預設的那個字串時，再度觸發buttonid這個button，但一直弄不出來...

請問該怎麼用？

緯大啊緯大人 iT邦好手 1 級 ‧ 2021-09-14 23:11:14 檢舉
你這樣應該是要onchange吧? 在資料有變動時一直去判斷，等到變成你要的值時跳出對話框
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
小魚
iT邦大師 1 級 ‧ 2021-09-15 09:51:52
最佳解答

你的 start 函式在哪呢?

xxx65819 iT邦新手 5 級 ‧ 2021-09-15 09:59:59 檢舉 
var dt = setInterval(function()
        {
            if(document.all)
            {
                document.getElementById("buttonid").click();
            }
            else
            {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("buttonid").dispatchEvent(e);
            }
        },2000)

這段

小魚 iT邦大師 1 級 ‧ 2021-09-15 10:24:26 檢舉

你不是呼叫restart,
restart去呼叫start,
但是沒有start啊.

xxx65819 iT邦新手 5 級 ‧ 2021-09-15 11:11:40 檢舉 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlphaBot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
	<script>
		function get_status() {
			$.get( "/light", function( data ) {
				var element = document.getElementById('status');
				element.innerHTML = data;
			});
		}
		var timeoutID = window.setInterval(( () => get_status() ), 1000);
	</script>
	<script>
		function get_fun() {
			$.get( "/tracking", function( st ) {
				var element = document.getElementById('track');
				element.innerHTML = st;
                if(st == "110/10/19")
                {
                    restart();
                }
			});
		}
		var timeoutID = window.setInterval(( () => get_fun() ), 1000);
	</script>
    <style type="text/css">
        .ts.segment {
            margin: 0 auto;
            width: 500px;
        }
        .button {
            border: 0 !important
        }
    </style>
    <script>
        function talk() {
            ts('#closableModal').modal("show")
        }
    </script>
    <script type="text/javascript">
        function start()
        {
            if(document.all)
            {
                document.getElementById("buttonid").click();
            }
            else
            {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("buttonid").dispatchEvent(e);
            }
        }
        function stop()
        {
		    clearInterval(dt);
	    }
        function restart()
        {
            dt = setInterval(start,2000); 
        }
        </script>
</head>
<body>
    <button onclick="javascript:talk()" id = "buttonid"></button>
    <div class="ts modals dimmer">
        <dialog id = "closableModal" class="ts fullscreen modal" open>
            <div class="header">
                這是你嗎？
            </div>
            <div class="image content">
                <div class="ts medium image">
                    <img src="image.jpg">
                </div>
                <div class="description">
                    <div class="ts header">我們在照片中偵測到了你。</div>
                    <p>這張照片看起來裡面包含著你的人像，如果你願意的話我們可以自動將該照片發佈至 <a href="https://www.gravatar.com" target="_blank">gravatar</a> 並替換你原先的頭像。</p>
                    <p>你希望這麼做嗎？</p>
                </div>
            </div>
            <div class="actions">
                <button onclick="stop()" class="ts deny button">
                    不
                </button>
                <button onclick="stop()" class="ts positive button">
                    是的
                </button>
            </div>
        </dialog>
    </div>
    <div class="ts text container">
        <div class="ts segment">
            <p align="center"><nobr>姓名：</nobr><nobr id='status' align="center">輸入</nobr></p>
            <p align="center"><nobr>生日：</nobr><nobr id='track' align="center">輸入</nobr></p>
            <!-- / 底部附著按鈕群組 -->
        </div>
    </div>
</body>
</html>

即便改成這樣還是無法達到我希望的結果，請問問題出在哪裡呢？

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22170 篇
完賽人數
597 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙