Подсчет количества кликов мыши на объект в jquery
всем Дорое время суток!
как можно подсчет количества кликов мыши на объект в jquery желательно с каким нибудь примером просто с jquery познакомился не давно |
Так что ли ?
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('#myObj').click(function() { $('#counter').html(+$('#counter').html()+1); }); }); </script> <style> #myObj { border: 1px;width: 100px;height: 100px; } </style> </head> <body> <div id="myObj">Click Me</div> <div id="counter">0</div> </body> </html> |
Скажите, а можно результат нажатия отображать в независимом окне, например разбить фреймами и в одном будет ссылка, а во втором счетчик???
|
Цитата:
|
Цитата:
|
Цитата:
PS: спросил человека, который последнее сообщение оставил в 2011 году :haha: |
Просто нужно, чтобы на сайте в статьях была кнопка, "Мне нравится" с подсчетом нажатий и сохранением этих подсчетов на каждой странице, этот скрипт подходит, только не сохраняет подсчет, а как сделать не знаю, т.к. с jqwery не знаком.
Может кто знает как дописать? Помогите, пожалуйста! |
Polsaimon,
Чтобы сохранять для всех - необходимо отправлять данные - Аяксом или скрытой формой на сервер, который увеличивает счетчик, - Тогда удобнее итоговую цифру подсчета результатов выводить либо мелким фреймом с отдельной страницы сайта(либо JSON файлом) Куки и Storage - не спасают... поскольку они изолировано находятся на каждом пользователе |
juery в принципе не нужен
<button class="but">+</button> <span id="span"></span> <script> window.onload = function () { span = document.getElementById('span'); var count = 0; //сюда записываем текущее значение span.innerHTML = count; document.body.onclick = function (e) { e = e || event; var target = e.target || e.srcElement; if (target.className == 'but') { count++; //здесь отсылаем новые данные на сервер, при удачном ответе обновляем содержимое span span.innerHTML = count; } } } </script> |
Получается также, при перезагрузке страницы, подсчет обнуляется, наверное запись должна либо в базу уходить, либо в файл, я так думаю
|
Цитата:
|
на сервер данные должны уйти (см. ajax или отправка данных в скрытый фрейм), там сохраниться, оттуда на новую страницу выгрузиться, комментарии в коде я привёл
PS: http://javascript.ru/ajax начните с первого пункта, там как раз пример про голосование |
Polsaimon,
bes дал скрипт для клиента - а на сервере - думайте сами (возможно и тут в теме помогут |
Люди добрые помогите пожалуйста дописать код!!!
|
Пример моей реализации.
jquery $('.btn-counter').click(function(){ var name = $(this).attr( "title" ); var like = $(this).attr( "data-count" ); $.ajax({ type: "POST", url: "likes.php", data: "id="+name+"&like="+like, success: function(data){ ('#result').text(data); } }); }); like.php <?php include_once("config.php"); $id = $_POST["id"]; $like = $_POST["like"]; $result = mysql_query(" UPDATE `citaty` SET `like` = '$like' WHERE `id` = '$id'; "); if ($result){ echo "Все норм"; } else { echo "упс"; } ?> Ну а что бы нельзя было лайкать дважды, нужно использовать куки |
Цитата:
А как сделать так, что бы когда счетчик доходил до определенного числа, то объект id="counter" меня фон , цвет текста или размер (свойства в общем!) |
walik,
А как сделать так, что бы когда счетчик доходил до определенного числа, то объект id="counter" меня фон , цвет текста или размер (свойства в общем!) |
puzjob,
накликать 5 :) <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myObj { border: 1px;width: 100px;height: 100px; } #counter:before{ content: attr(data-counter); margin: 20px; } #counter[data-counter="5"]:before{ color: #FF0000; -webkit-animation: up 5s ease-in-out infinite; -moz-animation: up 5s ease-in-out infinite; -o-animation: up 5s ease-in-out infinite; animation: up 5s ease-in-out infinite; } @keyframes up { 50% { -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); transform: scale(5); } } @-webkit-keyframes up { 50% { -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); transform: scale(5); } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('#myObj').click(function() { var counter = $('#counter').attr("data-counter"); $('#counter').attr({"data-counter" : ++counter}); }); }); </script> </head> <body> <div id="myObj">Click Me</div> <div id="counter" data-counter="0" ></div> </body> </html> |
рони,
Спасибо большое! А как сделать что бы число всегда оставалось красным если оно больше 5 ? |
puzjob,
Здравствуйте! Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела. <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myObj { border: 1px;width: 100px;height: 100px; } #counter:before{ content: attr(data-counter); margin: 20px; } #counter.red:before{ color: #FF0000; font-size: 48px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('#myObj').click(function() { var counter = $('#counter').attr("data-counter"); $('#counter').attr({"data-counter" : ++counter}); if(counter > 4) $('#counter').addClass("red") }); }); </script> </head> <body> <div id="myObj">Click Me</div> <div id="counter" data-counter="0" ></div> </body> </html> |
рони,
Спасибо большое Рони! |
Цитата:
|
Grasss,
Не лучше ли в localStorage сохранять? |
Суть как раз в том, чтобы данные хранились на сервере в файлике.
Каждый посетитель должен видеть общее число кликов. |
Можно пример кода?
|
:-? похоже на чат, только вывод общего количества сообщений.
|
Примерно так
|
const express = require('express'); const fs = require('fs'); const bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.text({ type: 'text/plain' })); app.route('/').get((req, res) => { res.send(` <div id="myObj">Click Me</div> <div id="counter">${fs.readFileSync('count.txt').toString() || '0'}</div> <script> myObj.onclick = e=> { var req = new XMLHttpRequest(); req.onreadystatechange = e => { if(req.readyState == 4 && req.status == 200){ counter.textContent = req.response; } }; req.open('POST', 'http://localhost:3000'); req.setRequestHeader('Content-Type', 'text/plain'); req.send('count++'); }; </script> `); }).post((req, res) => { if (req.body === 'count++') { var count = (Number(fs.readFileSync('count.txt')) + 1).toString(); fs.writeFileSync('count.txt', count); res.send(count); } }); app.listen(3000); хотя для такой задачи наверное больше socket подойдет |
Часовой пояс GMT +3, время: 09:20. |