評価するボタンを改修して以前より直感的な操作になりました．#vue3
2024.10.14
おはようございます．評価するボタンを改修して以前より直感的な操作になりました．以前のUIはこんな感じでセレクトメニューを選択し評価ボタンを押すという形でしたが、改修したUIは★を触れることで評価の値が変わります．
自分としては改修した方が操作しやすいと思っています．
因みにVue3.jsを使用しています．今までVue3.jsやReactの良さがあまり分かっていませんでしたが、なるほどこういう再レタリングする時に便利だよなって気づきました．バニラJSでコードを書くよりも比較的に簡単に書く事ができ再利用性があるそこが利点だと．
最後にVue3.jsのコードを貼っときます．
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
const Evaluation = {
props: {
defaultActive: {
type: Number,
required: true
},
totalItems: {
type: Number,
required: true
},
avgVal:{
type:Number,
required:true
}
},
data() {
return {
defaultActived: null,
items: []
};
},
created() {
// HTMLから渡された値を基に、初期の状態を設定
this.items = Array.from({ length: this.totalItems }, (v, i) =>{
return (i + 1) <= this.defaultActive ? '★' : '☆';
}
);
},
methods: {
// マウスが触れた時に☆を★に変える
hover(index) {
this.items = Array.from({ length: this.totalItems }, (v, i) =>
i <= index ? '★' : '☆'
);
document.getElementById('evaluationVal').setAttribute('data-val',index);
},
// マウスが離れた時に元の値に戻す
onclick() {
let i = Math.floor(document.getElementById('evaluationVal').getAttribute('data-val')) + 1;
(async (i) =>{
let frm = new FormData();
frm.append('id',document.querySelector('#evaluation_id').getAttribute('data-id'));
frm.append('val',i);
let res = await fetch('/evaluation/index.php',{
method:'post',
body:frm
}).then(result=>result.json());
alert(res.msg);
if(Math.floor(res.flg) === 1){
const roundToDecimal = (number, decimalPlaces) =>{
const multiplier = Math.pow(10, decimalPlaces);
return Math.round(number * multiplier) / multiplier;
}
document.getElementById('evaluationAvgVal').textContent = roundToDecimal(res.avgVal,2);
this.defaultActived = res.avgVal;
this.reRender();
}
})(i);
},
reRender() {
// HTMLから渡された値を基に、初期の状態を設定
this.items = Array.from({ length: this.totalItems }, (v, i) =>{
return (i + 1) <= this.defaultActived ? '★' : '☆';
}
);
}
},
template: `
<div>
<span v-for="(item, index) in items" :key="index">
<span
@mouseover="hover(index)"
>
{{ item }}
</span>
</span>
[<span id='evaluationAvgVal'>{{this.avgVal}}</span>]
<button @click="onclick()"
id='evaluationVal'
data-val='5'
class='bbtn'
title="★に触れることで評価の変更が出来ます．"
>評価する</button>
</div>
`
};
const app = createApp({});
app.component('evaluation', Evaluation);
app.mount('#evaluation');明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
$flg, app.component, app.mount, async, created, document.getElementById, evaluation, floor, frm, hover, Math.floor, methods, multiplier, onClick, pOW, props, setAttribute, this.totalItems, セレクトメニュー,
【#javascript定番】日付のカウントダウンを行う
2024.07.14
おはようございます．日付のカウントダウンを行うJavaScript言語の定番プログラムコードを作りましたので公開します．昨今、生成AIを使用してこのぐらいのコードは生成出来るかと思っていたのですが、こんなコードでも手直しが必要になりました．
やはり今の生成AIは事細かい指示を出さないと上手く動かないような気がします．それはプログラミングじゃない事でもそんな感じなのかもしれません．
<h1 id="countdown" data-y="2025" data-m="07" data-d="11"></h1>function countdown() {
let Y = document.querySelector('#countdown').getAttribute('data-Y');
let m = Math.floor(document.querySelector('#countdown').getAttribute('data-m')) -1;
let d = document.querySelector('#countdown').getAttribute('data-d');
let strCountDown = '';
let nowDate = new Date();
let countdownDate = new Date(Y,m,d,0,0,0);
let distance = countdownDate.getTime() - nowDate.getTime();
const day = Math.floor(distance / 1000 / 60 / 60 / 24);
const hour = Math.floor(distance / 1000 / 60 / 60) % 24;
const minute = Math.floor(distance / 1000 / 60) % 60;
const second = Math.floor(distance / 1000) % 60;
strCountDown = `${day}日 ${hour}:${minute}:${second}`;
view(strCountDown);
}
setInterval(countdown, 1000);
function view(str) {
document.querySelector('#countdown').textContent = str;
}
デモページはこちらになります．
https://zip358.com/tool/demo94
明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
countdown, countdownDate.getTime, data-y, distance, document.querySelector, floor, getAttribute, gt, hour, let, lt, minute, nowDate.getTime, querySelector, quot, second, setInterval, STR, strCountDown, textContent,