ホーム » blog »

よさこい祭り2023参加チーム一覧

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;
})();

--タグ--
assets,async,await fetch,await hasData,await response.json,getElementById,gt,hasData,if,innerHTML,join,lt,map,quot,quot;yosakoi-2023&quot,response.ok,return,str,td&gt,yosakoi-2023 let


動作検証🫠

https://358tool.com/furiko3/

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();

--タグ--
angle,angularAcceleration,angularVelocity,ballX,ballY,ctx.arc,ctx.beginPath,ctx.clearRect,ctx.fill,ctx.lineTo,ctx.moveTo,ctx.stroke,drawPendulum,getElementById,Math.cos,Math.PI,Math.sin,pivotX,pivotY,requestAnimationFrame


JSの再読み込み、これでスッキリかも。

JSの再読み込み、これでスッキリかもしれないですね。長々書く必要もなく…これで‥。
よろしくお願いします~~~~!

    <script class="js" src="./assets/main.js"></script>
    <script>
        [...document.querySelectorAll(".js")].forEach(elm=>{
            elm.setAttribute("src",elm.getAttribute("src") + "?" + (new Date).getTime());
        });
    </script>

--タグ--
assets,document.querySelectorAll,elm,forEach,getAttribute,getTime,gt,js,js&quot,lt,new Date,quot,quot;js&quot,script class,script&gt,setAttribute,src,src&quot


サイトについて

雑記帳:ログとして書いています、良い記事があればシェアお願いします。


RSS