js – 出雲川開発

js

javascript 日付文字列の日付フォーマットを変更する

8月 1, 2021 太平洋 0 Comment

2021-07-26 → 2021年7月26日



var datestr = "2021-07-26";
var date = Date.parse(datestr);
var date = new Date(date);

  format = date.getFullYear() + '年';
  format +=( date.getMonth() + 1 ) + '月';
  format += date.getDate() +'日';
  
  console.log(format);

js

jquery 要素を取得いろいろ

3月 8, 2021 太平洋 0 Comment

指定した要素本体の取得


   $('#youso').prop('outerHTML');

自分の親要素の順位

 
 var this_index = jQuery('.oya p').index(jQuery(this).parent());
 oyaクラスの中のpが何番目かが取得できる this は同じ親を持つボタンとか

チェックされているラジオボタン､checkBoxの値を取得

 
jQuery('input[name="shipper"]:checked').val();

ラジオボタンの見た目をONにする､属性を選択状態にする←これらは別物

 
 jQuery('[type="radio"]').eq(0).prop('checked',true).attr('checked',true);

選択されたラジオボタンがあればtrue

 
 var ret = $('[name="fls"]').is(':checked');

セレクトメニューに値をセット

 
jQuery(this).prop("selectedIndex", 0); //最初のoption指定

セレクトメニューで選択されたoption要素のdata属性を取得

 
jQuery('select').children('option:selected').data('id');

datalistで選択されたoption要素のdata属性を取得

 
  $('[name="company"]').change(function(){
      var issuer_id = $("#datalistOptions22 option[value='" + $('#company').val() + "']").data('issuer_id');
      console.log(issuer_id);
    });

js

JavaScriptでPHPのnumber_format

1月 17, 2021 太平洋 0 Comment

組み込みでもともとあるので自作しなくてもよい
number_format javascript

 
var price = 120000000;
console.log( price.toLocaleString());

→ 120,000,000

js

読み込み時に実行されるscriptの実行順

5月 14, 2020 太平洋 0 Comment

 



  jQuery(function ($) {
  // その他の処理
    $(window).on("load", function() {
    // 画像等全て読み終えた時の処理
      var h = $('.color-v img').height();
      console.log(h);
    });
  });

    $(function () {
      //DOM構築後実行 画像等は待たない
      $('header').append("$(fnction)");
    });

    $(document).ready(function () {
      //DOM構築後実行 画像等は待たない
      $('header').append("ready");
    });

    document.addEventListener('DOMContentLoaded', function () {
      //最初の HTML 文書の読み込みと解析が完了したとき
      $('header').append("addEventListener");
    });

    window.addEventListener('load', function() {
         $('header').append("window addEventListener");
    });

実行順

addEventListener

window addEventListener

$(fnction)

ready

$(window).on

js

javascript ec6 よく使うやつ

4月 11, 2020 太平洋 0 Comment



 let val = `テンプレート文字列とは
  ヒアドキュメントのようなもの`;
  console.log(val);

let name = '小川';
let str  = `My name is ${name}`;
console.log(str);

//分割代入
let [namae,age]=['ささき',35];
console.log(namae , age);

// js のforeach文
names = ['sato','ito','goto'];
for (let value of names){
  console.log(value);
}

// 可変長引数
function sum(...prop){
  var t = 0;
  for(let num of prop)
    t += num ;
  return t ;  
}
console.log( sum( 2 ,4 ,1 ) );
console.log( sum( 2 ,4 ) );

/*
無名関数をつくるアロー関数 
*/
var area = (x,y) => {
  console.log( x * y );
}
area(12,4);

// 一行の処理だけなら{}がいらない｡ 引数が一つなら()も省略可 
var squareArea = val => val ** 2
 console.log(squareArea(9));

js web

APIによるGoogleMap

11月 13, 2015 太平洋 0 Comment

真ん中にマーカーが来ている

var mapZoom = 16;

var mapCenter = new google.maps.LatLng(39.626028,140.1615576);緯度経度

function mapCreate(){

var mapOption={

zoom:mapZoom,

center:mapCenter

};

var map=new google.maps.Map(document.getElementById(‘map’),mapOption);

markerCreate(map);

}

function markerCreate(map){

new google.maps.Marker({

position:mapCenter,

map:map

});

}

google.maps.event.addDomListener(window, ‘load’, mapCreate);

</script>

</div>

[css]これは必要

#map {

width: 50%;

height: 230px;

}

js

自作MAPをgoogleMapみたいに

11月 12, 2015 太平洋 0 Comment

 
<iframe class="mapillare" src="./zoom_map.html" width=100% frameborder=0></iframe>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html,body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: white;
}
.mapfr{width: 100%;
}
</style>
<body>
<script src="js/d3.v3.min.js" charset="utf-8"></script>
<script>
var zoom = d3.behavior.zoom()
.scale(1)
.scaleExtent([.1, 10])
.on("zoom", zoomed);

var svg = d3.select("body")
.call(zoom);

function zoomed() {
var t = "translate(" + d3.event.translate[0] + 'px,' + d3.event.translate[1] +"px) " +
"scale(" + d3.event.scale + ',' + d3.event.scale + ")";
d3.select("img")
.style("transform-origin", "0 0")
.style("-moz-transform-origin", "0 0")
.style("-webkit-transform-origin", "0 0")
.style("-o-transform-origin", "0 0")
.style("-ms-transform-origin", "0 0")
.style("transform", t)
.style("-moz-transform", t)
.style("-webkit-transform", t)
.style("-o-transform", t)
.style("-ms-transform", t);
}
</script>
<img class="mapfr" src="img/mapillare.svg">
</body>

js web

Javascript遅延実行

11月 6, 2015 太平洋 0 Comment

イベント発生後に
任意時間遅延させてから実行する

function delay(){
var a = new Date().getTime();
var b = new Date().getTime();

while ((b – a)<1000){ b = new Date().getTime(); } }

Category js