-1
以下是我在點擊「技能」類時嘗試運行的腳本。它只能在後，它將無法運行，無論它有多少次點擊Javascript-jquery-只需點擊滾動事件即可調用函數一次
您可以在這裏的行動看到它點擊一次：http://jsfiddle.net/tvEC5/
我想修改，添加滾動功能，使它單擊或滾動時只執行一次，之後不應執行。
謝謝。
var skillsClicked = false; // <---- Add this OUTSIDE of the click function
$('.skills').on('click', function() {
if (skillsClicked === true) return false; // <---- Then add this
skillsClicked = true; // <----- And the final update
var gaugeConfig = {
"canvasHolderId": "HTML",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#2ECC71",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "7.5"
};
var gaugeConfig1 = {
"canvasHolderId": "CSS",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#2ECC71",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "6.5"
};
var gaugeConfig2 = {
"canvasHolderId": "JS",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#27AE60",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "7"
};
var gaugeConfig3 = {
"canvasHolderId": "JQ",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#F1C40F",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "7"
};
var gaugeConfig4 = {
"canvasHolderId": "BT",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#F1C40F",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "8"
};
var gaugeConfig5 = {
"canvasHolderId": "XML",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#F39C12",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "7.5"
};
var gaugeConfig6 = {
"canvasHolderId": "JAVA",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#E67E22",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "9"
};
var gaugeConfig7 = {
"canvasHolderId": "MVC",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#E67E22",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "8.5"
};
var gaugeConfig8 = {
"canvasHolderId": "SP",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#D35400",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "6.5"
};
var gaugeConfig9 = {
"canvasHolderId": "WB",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#E74C3C",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "7"
};
var gaugeConfig10 = {
"canvasHolderId": "SQL",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#E74C3C",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "8"
};
var gaugeConfig11 = {
"canvasHolderId": "HB",
"width": "150",
"height": "150",
"circleColor": "#222",
"arcColor": "#C0392B",
"canvasFillColor": "#333",
"textPosition": "inside",
"skillLevel": "6.5"
};
function drawGauge(gc) {
var W = gc.width;
var H = gc.height;
var degrees = 0;
var new_degrees = 0;
var difference = 0;
var color = gc.arcColor;
var bgcolor = gc.circleColor;
var text = gc.skillLevel;
var animation_loop, redraw_loop;
var me = this;
var canvasHolder = document.getElementById(gc.canvasHolderId);
var canvasCreator = document.createElement("canvas");
canvasCreator.id = _randomId();
canvasCreator.width = gc.width;
canvasCreator.height = gc.height;
canvasHolder.appendChild(canvasCreator);
var canvas = document.getElementById(canvasCreator.id);
function _randomId() {
var d = new Date();
return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds() * Math.random();
}
function _init() {
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, W, H);
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 15;
ctx.arc(W/2, H/2, 50, 0, Math.PI * 2, false); //you can see the arc now
ctx.stroke();
var radians = degrees * Math.PI/180;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 15;
ctx.arc(W/2, H/2, 50, 0 - 90 * Math.PI/180, radians - 90 * Math.PI/180, false);
ctx.stroke();
ctx.fillStyle = color;
ctx.font = "30px bebas";
text_width = ctx.measureText(text).width;
ctx.fillText(text, W/2 - text_width/2, H/2 + 12);
}
function _animate_to() {
if (degrees == new_degrees) clearInterval(animation_loop);
if (degrees < new_degrees) degrees++;
else degrees--;
_init();
}
function _draw() {
if (typeof animation_loop !== 'undefined') clearInterval(animation_loop);
new_degrees = Math.round((text * 3600)/100);
difference = new_degrees - degrees;
animation_loop = setInterval(function() {
_animate_to();
}, 1000/difference);
}
_draw();
}
new drawGauge(gaugeConfig);
new drawGauge(gaugeConfig1);
new drawGauge(gaugeConfig2);
new drawGauge(gaugeConfig3);
new drawGauge(gaugeConfig4);
new drawGauge(gaugeConfig5);
new drawGauge(gaugeConfig6);
new drawGauge(gaugeConfig7);
new drawGauge(gaugeConfig8);
new drawGauge(gaugeConfig9);
new drawGauge(gaugeConfig10);
new drawGauge(gaugeConfig11);
});
我很困惑。首先你說過「點擊時只能使用一次」，然後你說「我想修改它，使得它只能在點擊時執行一次」。 – j08691
這部分是或不是在工作？從你的問題來看，IT有點難以分辨。 – tremor
如果您創建適合單個頁面的示例，而不是從原始應用程序粘貼數百行代碼，則獲得幫助可能會更容易。 – hugomg