Example js vs jq - Real Helper

md.shakil hossain

1427

Example js vs jq

 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div style="margin:50px;">
<a href='#' id="hd">hide</a>
<a href='#' id="shw">show</a>
<h1 id="head">Добропожаловать</h1>
<p class="text">Много разного текста...<br>
посмотрим что получится за эффект</p>
</div>
<div id="result"></div>

        <div id="calculator">
        Простой калькулятор
            <table>
                <tr>
                    <td colspan="4"><div id="display"></div></td>
                </tr>
                <tr>
                    <td><button onclick="prnt(1)">1</button></td>
                    <td><button onclick="prnt(2)">2</button></td>
                    <td><button onclick="prnt(3)">3</button></td>
                    <td><button onclick="calc('addition')">+</button></td>
                </tr>
                <tr>
                    <td><button onclick="prnt(4)">4</button></td>
                    <td><button onclick="prnt(5)">5</button></td>
                    <td><button onclick="prnt(6)">6</button></td>
                    <td><button onclick="calc('subtraction')">-</button></td>
                </tr>
                <tr>
                    <td><button onclick="prnt(7)">7</button></td>
                    <td><button onclick="prnt(8)">8</button></td>
                    <td><button onclick="prnt(9)">9</button></td>
                    <td><button onclick="calc('multiplication')">*</button></td>
                </tr>
                <tr>
                    <td><button onclick="prnt(0)">0</button></td>
                    <td><button onclick="prnt('.')">.</button></td>
                    <td><button onclick="result()">=</button></td>
                    <td><button onclick="calc('division')">/</button></td>
                </tr>
                <tr>
                <td colspan="4"><button onclick="reset()">C</button></td>
                </tr>
            </table>
        </div>

Try it Yourself >>

 button{
    width:40px;
    height: 40px;
}
#calculator {
    width:170px;
    height: 170px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    text-align: center;
    padding: 5px;
}

#display {
    width: 170px;
    height: 20px;
    border: 1px solid #C0C0C0;
    text-align: right;
}

Try it Yourself >>

/*JQuery*/
$('#head').click(function(){
  alert('test text');
});

$('.text').click(function(){
  var x = $(this).clone();
  $('#result').append(x);
});

/*javascript*/
/*обьекты*/
var hidetext = document.getElementById('hd')
var showtext = document.getElementById('shw')
/*действия*/
function click1(){
  var ht = $('#head');
  ht.fadeOut(3000);
  var tt = $('.text');
  tt.fadeOut(3000);
}
function click2(){
  var ht = $('#head');
  ht.fadeIn(3000);
  var tt = $('.text');
  tt.fadeIn(3000);
}
/*события*/
hidetext.onclick = click1;
showtext.onclick = click2;

/* Калькулятор*/
var operand = null;
var operation = null;

function prnt(c) {
    document.getElementById("display").innerHTML = document.getElementById("display").innerHTML + c;
}

function calc(o) {
    operand = document.getElementById("display").innerHTML;
    operation = o;
    document.getElementById("display").innerHTML = "";
}

function result() {
    if (operand === null || operation === null || document.getElementById("display").innerHTML === "") {
        alert("Нечего считать!");
        return;
    }
    other_operand = document.getElementById("display").innerHTML - 0;
    r = 0;
    switch (operation) {
    case "addition":
        r = +operand + other_operand;
        break;
    case "subtraction":
        r = operand - other_operand;
        break;
    case "multiplication":
        r = operand * other_operand;
        break;
    case "division":
        r = operand / other_operand;
        break;
    }
    document.getElementById("display").innerHTML = r;
}

function reset() {
    document.getElementById("display").innerHTML = "";
    operand = null;
    operation = null;
}

Try it Yourself >>