@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
大晦日までカウントダウンしてまたカウントダウンするJSコード #永遠
2024.12.18
おはようございます.大晦日までカウントダウンしてまたカウントダウンするJSコードだけではツマラナイので全て漢字に変換して表示するコードを書きました.これでもツマラナイと思う人もいると思います.
そんなに難しいコードでもないのでコードを添付します💁.
function updateCountdown() {
const now = new Date();
const nextNewYear = new Date(now.getFullYear() + 1, 0, 1, 0, 0, 0); // 次の年の1月1日0時0分0秒
const diff = nextNewYear - now; // ミリ秒差
if (diff > 0) {
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// 表示を更新
document.getElementById("countdown").innerText =
kanji(`${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`);
} else {
document.getElementById("countdown").innerText = "明けましておめでとうございます！";
}
}
// 初回呼び出しと1秒ごとの更新
updateCountdown();
setInterval(updateCountdown, 1000);
function kanji(str){
let oo = [{'kanji':'零'},{'kanji':'壱'},{'kanji':'弐'},{'kanji':'参'},{'kanji':'肆'},{'kanji':'伍'},{'kanji':'陸'},{'kanji':'漆'},{'kanji':'捌'},{'kanji':'玖'}];
oo.forEach((o,index)=>{
str = str.replace(new RegExp(index, "g"),o.kanji);
});
return str;
}もっと芸のあるカウントダウンを作ろうとするとp5jsなどのライブラリが必要になると思います.WEBサイトでパーティカルなどを行っているサイトは大体こういうライブラリを使用しています.p5jsなどを使用して昔作ってみようかななどと思ったことが有りますが、実はp5jsは一度も触ったことがないです.
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
```, カウント, カウントダウン, コード, ツマラナイ, パーティカル, ライブラリ, 伍, 全て漢字, 初回呼び出し, 参, 大晦日, 月日時分秒, 漆#, 玖#, 秒, 秒ごと, 肆#, 芸, 陸#,
文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミング #unicode
2022.10.05
おはようございます、先日（日曜日のこと）は久しぶりに本屋さん巡りしていました😋。本屋📖は良いですね落ち着きます。
さて、文字コードのカウントは奥が深いなって話を記載していきます。人目線からすれば文字をカウントするという至って簡単な話にですが、PC（コンピューター）にとっては奥が深いです・・・日本語漢字も面倒だけどエジプト系の象形文字系(unicode)は本当に面倒そうです。まだ、作りかけですがツイッターの用な文字コードのカウントするjavascriptコードを書きましたのでサンプルコードとしてご使用ください。
※WindowsOSの環境下でChromeブラウザ動作させ検証しました。コピペ文字には対応していません😇。UTF-8 ではない違う文字コードを貼り付けてみてください、変なことになると思います😂。例えばEUC文字コードだとか・・・。
動作サイトはこちらです。
function moji(o) {
let m = o.nextElementSibling;
//ads
let h = ((o) => {
let l = o.value.match(/(https?:\/\/[a-z|A-Z|0-9|\-|_|%|\.|\/]{0,})/giu);
let ml = l ? ((l) => {
return sum = l.reduce((s, e) => {
return s + e.length;
}, 0);
})(l) : 0;
return l ? {
len: (l.length * 23),
mlen: ml
} : {
len: 0,
mlen: ml
};
})(o);
//zenkaku
let k = ((o) => {
let l = o.value.match(/[^\x20-\x7e]/giu);
let ml = l ? ((l) => {
return sum = l.reduce((s, e) => {
return s + e.length;
}, 0);
})(l) : 0;
return l ? {
len: (l.length * 2),
mlen: l.length
} : {
len: 0,
mlen: ml
};
})(o);
m.innerHTML = "【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】";
if ((o.value.length + h.len - h.mlen + k.len - k.mlen) >= 280) {
m.innerHTML = "<span class='text-danger'>【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】</span>";
}
} <label for="my-textarea" class="h3">文字を入力してください。</label>
<textarea id="my-textarea" class="form-control" oninput="moji(this);" name="" rows="3"></textarea>
<span class="h3"></span>尚、サンプルコードは１バイトを一文字としてカウントしていきます、そしてURL文字はどんなに長くても２３文字にカウントされます、これはTwitter社の仕様と合わしています。URL文字はURL短縮が行われ23文字の短縮URLが生成されるからその様にカウントしているのですが、なんか本物と違うですよね挙動が・・・🙇♂。因みに絵文字がどのようにカウントされるかは確認していません。
※UTF8では絵文字(unicode)を３バイトで表記させているそうです。昔、UTF-8は2バイトで表現しているとか習っていたのですが、それはカナリ古い知識だったみたいです😇。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
8, Chrome, Code, EUC, javascript, PC, Unicode, UTF-, WindowsOS, エジプト, カウント, コード, こと, コピペ, コンピューター, サンプル, ツイッター, ブラウザ, プログラミング, 久しぶり, 人目, 使用, 先日, 動作, 変, 奥, 対応, 数, 文字, 日曜日, 日本語, 本屋, 本当, 検証, 漢字, 環境, 用, 簡単, 記載, 話, 象形, 面倒,
2023年７月からGA4に変わるだってさ。桐島くん。
2022.07.20
おはようございます。下記の記事には桐島くんは関係ありません😌。
2023年７月からGA4に変わるそうです、一年前から告知している、Gさん。自分は2022年の７月から変わるだと思い込んでAnalyticsの対応を全て行いました。対応後、2023年じゃんって気づいて吐息…😩。
さてGA4になるとどのように変わるのか、例えばユーザーのカウントの仕方が変わったりするそうですね。今までのカウントの数え方よりもっと厳密になるそうです。そして今まで（GA3）はリアルタイムに反映されていた訪問者数が今のところ、翌日に反映されるように！！これはあまり有り難くない仕様変更です。リリースされる頃にはリアルタイムに変更されていることを願ってます。
ともあれ、2023年７月から無料版GA3は廃止され、GA4に移行しなくてはならないです。アクセス解析のソースコードの入れ替えを行わないといけないので、WEB業界としてはちょっと美味しいメンテナンス作業ですね。費用が発生すればの話ですけど・・・。
詳しい仕様変更の違いを呟いている人やサイトがありますので、詳しい違いはそちらを参照ください。尚、自分としてはUI（ユーザーインターフェース）がガラリと変わって少し戸惑いました。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
-GA, 2022, 2023, ３, 4, 7, Analytics, web, アクセス, あれ, カウント, コード, こと, これ, ソース, ところ, ユーザー, リアルタイム, リリース, 一, 下記, 今, 仕方, 仕様, 全て, 反映, 吐息, 告知, 変更, 対応, 廃止, 数え方, 桐島, 業界, 無料, 移行, 翌日, 自分, 解析, 記事, 訪問者, 関係, 頃,
退職日まで日数を求める・JSでカウントダウンコードを構築してみた😆
2022.07.02
おはようございます。ちょっと退職後の事を思うと不安が過りますが、何とかなる何とかします😆。
さて、退職日まで後何日あるかを確認出来る物を作りました、土日はカウントしない場合も考慮しています。このコードは人様のコードを拝借して再構築したものになります。
参考にしたサイトはこちらです。土曜日、日曜日は除くように新たに無名関数を入れ込んでいます。土日はカウントせず月曜日のカウントになります。JavaScriptのコードは下記になります。HTMLコードに敢えて記載しません、ご自由に書き換えて試してくださいませ。
var showDiffDate = function( tYear, tMonth, tDay) {
var nowDate = new Date();
var dnumNow = nowDate.getTime();
var targetDate = new Date( tYear, tMonth-1, tDay );
var dnumTarget = targetDate.getTime();
var diffMSec = dnumTarget - dnumNow;
var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
var showDays = Math.ceil( diffDays );
var Msg;
if( showDays >= 0 ) {
Msg = "" + showDays + " days(" + function(){
var is_days = parseInt(parseInt(showDays) - Math.floor(showDays / 7) * 2);
is_days = (nowDate.getDay() === 0)?is_days -2:is_days;
is_days = (nowDate.getDay() === 6)?is_days -3:is_days;
return is_days;
}() +")";
}
else {
Msg = "" + (showDays * -1) + "";
}
return Msg;
};
document.getElementById("days").innerText = showDiffDate(2022,7,15);尚、このコードはそれほど難しいことはなく難易度で言えば最も簡単なコードだと思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
date, dnumNow, function, getTime, html, javascript, JS, new, nowDate, showDiffDate, targetDate, tDay, tMonth, tY, tYear, var, カウント, カウントダウン, コード, こちら, サイト, もの, 下記, 不安, 事, 人様, 何日, 参考, 土日, 土曜日, 場合, 後, 拝借, 日数, 日曜日, 月曜日, 構築, 無名, 物, 確認, 考慮, 記載, 退職, 関数,
WebAPIの作り方、考え方です?。サンプルコードもありますよ。
2021.12.24
昨日から風邪を引いてしまいました…。今日も体調が優れない状態ですが、昨日よりはマシになっています、因みに風邪というよりも腸と胃に菌がはいってしまって、それによる発熱です?。
さて、今回はPHP言語でWebAPIの作りましたので、ご報告致します、どんなAPIかというと生年月日とカウントしたい歳をPOSTすると、現在の年齢、今まで生きてきた日数、カウント日数がレスポンス（返却）されます。
PHPコードは下記の通りになります。適当に作ったので間違っている箇所があるかもしれませんが、そこはご愛嬌でお願いできますでしょうか?、また、WebAPIの叩き方はご自身でお考えくださいませ。
サーバーに負荷が増したらWEBAPIは閉じます。
尚、WEBAPIのURLはこちらになります。
https://zip358.com/api/age/v1/type1/
<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set('Asia/Tokyo');
$birth_date = (string)$_POST["birth_date"];
$max_age = (int)$_POST["point_age"];
/**
* @param string $birth_date
* @return string|false
*/
function check1($birth_date = ""): bool
{
$flg = false;
$str_date = explode("/", $birth_date);
if (count($str_date) === 3) {
$flg = true;
if (!((int)$str_date[0] >= 1000)) {
$flg = false;
}
if(((int)$str_date[0] > (int)date("Y"))){
$flg = false;
}
if (!((int)$str_date[1] >= 1 && (int)$str_date[1] <= 12)) {
$flg = false;
}
if ($flg) {
if ((int)$str_date[1] === 2) {
if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 28)) {
$flg = false;
}
if ((int)$str_date[0] % 4 === 0) {
$flg = true;
if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 29)) {
$flg = false;
}
if ((int)$str_date[0] % 100 === 0) {
$flg = true;
if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 28)) {
$flg = false;
}
if ((int)$str_date[0] % 400 === 0) {
$flg = true;
if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 29)) {
$flg = false;
}
}
}
}
} else {
$last_day = [4, 6, 9, 11];
if (array_search((int)$str_date[1], $last_day, false)!== false) {
if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 30)) {
$flg = false;
}
} else {
if (!((int)$str_date[2] >= 1 && (int)$str_date[2] <= 31)) {
$flg = false;
}
}
}
}
}
return $flg;
}
/**
* @param int $age
* @return string|false
*/
function check2($age = 0): bool
{
$flg = true;
if ($age < 0) {
$flg = false;
}
return $flg;
}
/**
* @param string $birth_date
* @param string $maxage
* @return string $reslut
*/
function sumup($birth_date, $maxage)
{
$reslut = [];
$birth_date_array = explode("/", $birth_date);
$birth_date = sprintf("%04d%02d%02d", $birth_date_array[0], $birth_date_array[1], $birth_date_array[2]);
$today = date('Ymd');
$age = floor(($today - $birth_date) / 10000);
$day1 = new DateTime("{$birth_date_array[0]}-{$birth_date_array[1]}-{$birth_date_array[2]}");
$day2 = new DateTime();
$interval1 = $day1->diff($day2, true);
$baseday = (int)($interval1->format('%a'));
if ((int)$maxage <= (int)$age) {
$pointday = 0;
} else {
$maxage--;
$day3 = new DateTime((date('Y') + ($maxage - $age)) . "-{$birth_date_array[1]}-{$birth_date_array[2]}");
$interval2 = $day2->diff($day3, true);
$pointday = (int)($interval2->format('%a'))+1;
}
$reslut = [
[
"result" => "success",
"age"=>$age ."歳",
"baseday" => $baseday . "日(生きてきた日数)",
"pointday" => $pointday . "日(" .($maxage +1). "歳まであと)"
]
];
return json_encode($reslut);
}
if (!check1($birth_date)) {
print json_encode([
[
"result" => "error",
"error" => "string is invalid1"
]
]);
} elseif (!check2($max_age)) {
print json_encode([
[
"result" => "error",
"error" => "string is invalid2"
]
]);
} else {
print sumup($birth_date, $max_age);
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
39, Access-Control-Allow-Origin, API, header, lt, php, POST, url, WebApi, お願い, カウント, コード, こちら, ご報告, ご愛嬌, ご自身, サーバー, サンプル, そこ, それ, まし, レスポンス, 下記, 今回, 今日, 体調, 作り方, 叩き, 年齢, 日数, 昨日, 歳, 状態, 現在, 生年月日, 発熱, 箇所, 考え方, 胃, 腸, 菌, 言語, 負荷, 返却, 通り, 適当, 風邪,