Texte vergleichen

Finden Sie den Unterschied zwischen zwei Textdateien

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

Onlinewerkzeuge

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Untitled diff

Created 10 years agoDiff never expires

Lines
Total
Removed

Words
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

66 lines

Lines
Total
Added

Words
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

68 lines

//Problem: No user interaction causes no change to application

// Problem: No user interaction causes no change to application.

//Solution: When user interacts cause changes appropriately

// Solution: When user interacts, cause changes appropriately.

var color = $(".selected").css("background-color");

var $canvas = $("canvas");

var context = $canvas[0].getContext("2d");

var lastEvent;

var mouseDown = false;

// When clicking on control list items

//When clicking on control list items

$(".controls").on("click", "li", function() {

$(".controls").on("click", "li", function(){

// Deselect sibling elements

//Deselect sibling elements

$(this).siblings().removeClass("selected");

// Select clicked element

//Select clicked element

$(this).addClass("selected");

// Cache current color

//cache current color

color = $(this).css("background-color");

});

//When "New Color" is pressed

// When "New Color" is clicked

$("#revealColorSelect").click(function(){

//Show color select or hide the color select

// Show color select or hide the color select

changeColor();

$("#colorSelect").toggle();

});

//update the new color span

// Update the new color span

function changeColor() {

var r = $("#red").val();

var g = $("#green").val();

var b = $("#blue").val();

$("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");

$("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");

}

//When color sliders change

// When color sliders change

$("input[type=range]").change(changeColor);

//When "Add Color" is pressed

// When "Add Color" is pressed

$("#addNewColor").click(function(){

//Append the color to the controls ul

// Append the color to the control list

var $newColor = $("<li></li>");

$newColor.css("background-color", $("#newColor").css("background-color"));

$(".controls ul").append($newColor);

//Select the new color

// Select the new color

$newColor.click();

});

//On mouse events on the canvas

// On mouse event on the canvas

$canvas.mousedown(function(e){

lastEvent = e;

mouseDown = true;

}).mousemove(function(e){

//Draw lines

// Draw lines

if(mouseDown) {

context.beginPath();

context.moveTo(lastEvent.offsetx, lastEvent.offsety);

context.moveTo(lastEvent.offsetX, lastEvent.offsetY);

context.lineTo(e.offsetx, e.offsety);

context.lineTo(e.offsetX, e.offsetY);

context.strokeStyle = color;

context.stroke();

lastEvent = e;

}

}).mouseup(function(){

mouseDown = false;

}).mouseLeave(function(){

}).mouseleave(function(){

$canvas.mouseup();

});

Gespeicherten Diffs

Original text

Datei öffnen

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;

//When clicking on control list items
$(".controls").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

//When "New Color" is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the color select
  changeColor();
  $("#colorSelect").toggle();
});

//update the new color span
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}

//When color sliders change
$("input[type=range]").change(changeColor);

//When "Add Color" is pressed
$("#addNewColor").click(function(){
  //Append the color to the controls ul
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  //Select the new color
  $newColor.click();
});

//On mouse events on the canvas
$canvas.mousedown(function(e){
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e){
  //Draw lines
  if(mouseDown) {
    context.beginPath();
    context.moveTo(lastEvent.offsetx, lastEvent.offsety);
    context.lineTo(e.offsetx, e.offsety);
    context.strokeStyle = color;
    context.stroke();
    lastEvent = e;  
  }
}).mouseup(function(){
  mouseDown = false;
}).mouseLeave(function(){
  $canvas.mouseup();
});

Geänderter text

Datei öffnen

// Problem: No user interaction causes no change to application.
// Solution: When user interacts, cause changes appropriately.

var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;

// When clicking on control list items
$(".controls").on("click", "li", function() {
    // Deselect sibling elements
    $(this).siblings().removeClass("selected");
    // Select clicked element
    $(this).addClass("selected");
    // Cache current color
    color = $(this).css("background-color");
});

// When "New Color" is clicked
$("#revealColorSelect").click(function(){
    // Show color select or hide the color select
    changeColor();
    $("#colorSelect").toggle();
});

// Update the new color span
function changeColor() {
    var r = $("#red").val();
    var g = $("#green").val();
    var b = $("#blue").val();
    
    $("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
}
                       
// When color sliders change
$("input[type=range]").change(changeColor);

// When "Add Color" is pressed
$("#addNewColor").click(function(){
    // Append the color to the control list
    var $newColor = $("<li></li>");
    $newColor.css("background-color", $("#newColor").css("background-color"));
    $(".controls ul").append($newColor);
    // Select the new color
    $newColor.click();
});

// On mouse event on the canvas
$canvas.mousedown(function(e){
    lastEvent = e;
    mouseDown = true;
}).mousemove(function(e){
    // Draw lines
    if(mouseDown) {
        context.beginPath();
        context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
        context.lineTo(e.offsetX, e.offsetY);
        context.strokeStyle = color;
        context.stroke();
        lastEvent = e;   
    }
}).mouseup(function(){
    mouseDown = false;
}).mouseleave(function(){
    $canvas.mouseup();
});