https://yosakoi-video.com/yosakoi2023/ JSONデータ有り🐜
//yosakoi-2023
let hasData = async()=>{
let response = await fetch("./assets/yosakoi2023.json");
if(!response.ok){
throw new Error("E");
}
let data = await response.json();
return data;
};
(async()=>{
let data = await hasData();
var str = "<table class='table table-striped'>"
str+= `<tr><th>チーム名</th><th>受付番号</th></tr>`;
str+= data.map(d=>{
return `<tr><td>${d.name}</td><td>${d.no}</td></tr>`;
}).join("");
str = str + "</table'>";
document.getElementById("yosakoi-2023").innerHTML = str;
})();
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let angle = Math.PI / 90;
let angularVelocity = 0.01;
let angularAcceleration = 0;
let pivotX = canvas.width / 2;
let pivotY = 250;
let ballX = pivotX + Math.sin(angle) * 100;
let ballY = pivotY + Math.cos(angle) * 100;
function drawPendulum() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(pivotX, pivotY);
ctx.lineTo(ballX, ballY);
ctx.stroke();
ctx.beginPath();
ctx.arc(ballX, ballY, 20, 0, 2 * Math.PI);
ctx.fill();
angle += angularVelocity;
angularVelocity += angularAcceleration;
ballX = pivotX + Math.sin(angle) * 100;
ballY = pivotY + Math.cos(angle) * 100;
requestAnimationFrame(drawPendulum);
}
drawPendulum();
addEventListenerでsubmitを阻止する方法です。
document.getElementById("A").addEventListener("submit",Afun);
function Afun(event){
console.log(event);
event.preventDefault();
}