diedVIPs

html knowhow

Bild Klickzähler











Bild Klickzähler MIT Zählerstand-Speicherung

Der Counter zählt jeden Klick und speichert ihn.
So sieht´s aus

Quellcode
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Sie haben das Bild " + localStorage.clickcount + " mal angeklickt.";
} else {
document.getElementById("result").innerHTML = "Entschuldigung. Ihr Browser unterstützt diese Fubktion nicht.";
}
}
</script>

<html>  Hier nichts 
<head>

<style type="text/css">  Hier nichts  </style>
</head>

<body>
<p><button style="background-color:transparent;border:0px" onclick="clickCounter()" type="button">Klicken Sie auf das Bild <img src="../bilder/monroe.jpg" height="150" size="150" alt="monroe" onclick="image()">
und der Counter erhöht sich um 1</button></p>
<div id="result"></div>

</body>

</html>


Bild Klickzähler OHNE Zählerstand-Speicherung

Der Counter zählt zwar jeden Klick, speichert ihn aber nicht.
So sieht´s aus


cat img
Bisher

0

mal geklickt

Quellcode
<html>
Hier nichts
<head>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<style type="text/css">
Hier nichts
</style>
</head>

<body>
<script>
$(function() {
let i = 0;
$('#myImg').click(function() {
i++;
$('#click-counter').text(i);
});
});
</script>

<center><div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="../bilder/life.jpg" alt="cat img">
<h1 id="click-counter">0</h1>
</div></center>
</body>

</html>









Kontakt    Datenschutz    Impressum