堆棧內存溢出
  簡體   English   中英

在某個位置停止該功能Javascript

[英]Stop the function at a certain point Javascript

 原文  2014-01-21 09:13:45  0   2    javascript/ jquery/ html5/ html/ line

問題描述

我求救。 在下面的代碼中，當選擇兩個對象時，將出現一行。 我需要一個函數，當我們完成一個完整的循環后，該函數將停止整個過程。 我的意思是，當我們從一個對象開始時，請遍歷所有對象，一旦回到該對象上，它將成為一行的結尾，整個對象凍結並且出現文本。 我是一個菜鳥，我真的不能自己做到。 非常感謝。 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    img {
        padding: 1px;
        margin: 2px;
        float: left;
        background-color: #99BC99
    }
    img.selected {
        padding: 2px;
        margin: 4px;        
        background-color: #E13300
    }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('img').click(function(){
        var $elem1 = $(this).parent();
        var $elem2 = $('span.last');
        $(this).toggleClass('selected');
        if ($elem2.length > 0) {
             connect($elem1[0], $elem2[0], "#0F0", 5);
        } else { $elem1.addClass('last'); }
        $('span').removeClass('last');
        $elem1.addClass('last');
    });
});

function connect(div1, div2, color, thickness) {
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
    // bottom right
    var x1 = off1.left + off1.width;
    var y1 = off1.top + off1.height;
    // top right
    var x2 = off2.left + off2.width;
    var y2 = off2.top;
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
    // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";

    $('body').append($(htmlLine));
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    var _w = el.offsetWidth|0;
    var _h = el.offsetHeight|0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x, width: _w, height: _h };
}

window.testIt = function() {
    var div1 = document.getElementById('div1')
    var div2 = document.getElementById('div2')
    connect(div1, div2, "#0F0", 5);
}

</script>

</head>

<body>
<script type="text/javascript">

</script>
  <span style="position: absolute; left: 933px; top: 211px;"> <img src="Untitled-2.jpg" alt="" width="35" height="35" id="div1"/></span>
  <span style="position: absolute; left: 304px; top: 190px;"> <img src="Untitled-3.jpg" alt="" width="35" height="35" id="div2"/></span>
  <span style="position: absolute; left: 756px; top: 264px;"> <img src="Untitled-4.jpg" alt="" width="35" height="35" id="div3"/></span>
  <span style="position: absolute; left: 365px; top: 395px;"> <img src="Untitled-6.jpg" alt="" width="35" height="35" id="div4"/></span>
  <span style="position: absolute; left: 129px; top: 302px;"> <img src="Untitled-5.jpg" alt="" width="35" height="35" id="div5"/></span>
  <span style="position: absolute; left: 504px; top: 261px;"> <img src="Untitled-7.jpg" alt="" width="35" height="35" id="div6"/></span>
  <span style="position: absolute; left: 650px; top: 393px;"> <img src="Untitled-8.jpg" alt="" width="35" height="35" id="div7"/></span>
  <span style="position: absolute; left: 283px; top: 26px;"> <img src="Untitled-9.jpg" alt="" width="35" height="35" id="div8"/></span>
  <span style="position: absolute; left: 593px; top: 35px;"> <img src="Untitled-10.jpg" alt="" width="35" height="35" id="div9"/></span>
  <span style="position: absolute; left: 784px; top: 42px;"> <img src="Untitled-1.jpg" alt="" width="35" height="35" id="div10"/></span>
</body>
</html>

2 個解決方案

解決方案1
 1 已采納  2014-01-21 10:34:09

可能會嘗試這個.... 

$(document).ready(function() {
var currentTrend = 0,
    freezed = false;;
$('img').click(function(){        
    if(freezed) {
        return;
    }
    var currentEl = $(this);
    var $elem1 = $(this).parent();        
    if(currentEl.hasClass("selected")) {
        currentEl.toggleClass('selected');
        if($elem1.hasClass("last"+currentTrend)) {                                  
              $("div.lastLine" + currentTrend).remove();
                currentTrend--;
                return;
        } else if (currentTrend > 2) {
            $('body').append('<div class="message">Finished</div>');
             freezed = true;             
        }
    }
    var $elem2 = $('span.last'+currentTrend);
   currentEl.toggleClass('selected');

    $('span').removeClass('last');

    currentTrend++;
    if ($elem2.length > 0) {
         lastLine = connect($elem1[0], $elem2[0], "#0F0", 5);
        lastLine.addClass('lastLine'+ currentTrend);
    }

    $elem1.addClass('last' + currentTrend);

});

}）;

http://jsfiddle.net/vinodgubbala/8WFuY/1/

解決方案2
 0  2014-01-21 09:30:21

啊，對不起，我沒有在家里看到這個評論： 

var stop_process = false;
$('img').click(function(){
    if( !stop_process ){
        if( $(this).hasClass( 'home' ) )
            stop_process = true;
        if( $('img.home').length == 0 )
            $(this).addClass('home');

        var $elem1 = $(this).parent();
        var $elem2 = $('span.last');
        $(this).toggleClass('selected');
        if ($elem2.length > 0) {
            connect($elem1[0], $elem2[0], "#0F0", 5);
        } else { $elem1.addClass('last'); }
        $('span').removeClass('last');
        $elem1.addClass('last');
    }
});

我在這里留下我的第一個答復。 也許還有一些有用的東西。 好吧，我的第一個猜測是： 

var stop_process = false;
$('img').click(function(){
    if( !stop_process ){
        if( $(this).hasClass( 'selected' ) )
            stop_process = true;
                    ... }
});

但是，這意味着，我們假設，只有當用戶填充一個圓圈時，他才會兩次單擊“圖像”。 也許對您來說足夠了，我不知道腳本的目的。 讓我們假設這種點擊方式：

IMG1-IMG2-IMG3-IMG4-IMG2 IMG2-...-IMG2對您來說是有效圈子嗎？

如果是這樣，您仍然必須避免將其計為一個圓圈：IMG1-IMG2-IMG1

快速瀏覽： 

var stop_process = false;
$('img').click(function(){
    if( !stop_process ){
        if( $(this).hasClass( 'selected' ) && !$(this).parent().hasClass( 'third' ) )
            stop_process = true;
        var $elem1 = $(this).parent();
        var $elem2 = $('span.last');
        $(this).toggleClass('selected');
        if ($elem2.length > 0) {
            $( 'span' ).removeClass( 'third' );
            $elem2.addClass( 'third' );
            connect($elem1[0], $elem2[0], "#0F0", 5);
        } else { $elem1.addClass('last'); }
        $('span').removeClass('last');
        $elem1.addClass('last');
    }
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在特定點停止JavaScript進度欄 在特定點停止/啟動JavaScript增量 Javascript：我想在某個時候停止代碼。 一定時間后停止javascript函數 在jQuery中的某個點停止滾動 當音頻在JavaScript中經過某個時間點時運行功能 JavaScript：事件監聽器 Function 無法識別屏幕上某個點之后的事件 在JavaScript中一定時間后如何停止executinf函數 達到特定結果后停止javascript中的函數 一定時間后如何停止javascript函數？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM