k01ken’s b10g

He110 W0r1d!

jQuery

JavaScriptでタイマー機能を使って数字のカウントを見せる

開発環境は、Windows 7 Professional(32bit)例えば、査定サイトで査定価格の金額を0円から査定価格までタイマーで動かして見せる動作を加えるとする。0円から査定価格の1/10ずつ増やしていって、査定価格に達したら、査定価格と切り替えてタイマーを破棄する…

emojioneを使う

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。1.サイトへアクセスする GitHub - emojione/emojione: EmojiOne™ is the open emoji standard. #iwantemojione 2. /lib/js/emojione.min.jsへアクセスし、コピペしてemoj…

jQueryでウィンドウの幅を調べる

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。HTML側 <div id="size"></div> <div id="size2"></div> jQuery側 $(window).on('load resize',function(){ $('#size').html('windowの横幅:' + $(window).width()); $('#size2').html('スクロールバーも含めたwindow…

JavaScript(jQuery)で親要素と子要素のイベントが被らないようにする

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。下記の例だと、黒い四角内をクリックすると『親要素』というアラートが表示され、赤い四角内をクリックすると『子要素』→『親要素』と2回アラートが表示されてしまう。HT…

jQueryのanimateを用いてページ下部にメッセージを表示させる

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。ボタンをクリックすることでページの下部に、メッセージを3秒間させるアニメーションを作成する。heightが0pxなので、読み込んだ時点では、Message部分は見えない。HTML…

jQueryのonメソッドでマウスホバーをし、動的に生成されたものにも適用する

開発環境は、jquery-3.2.1.min.js。マウスカーソルを合わせた*部分を、太字にして、話したら、元に戻す。 『liが先頭に追加』ボタンをクリックすると、先頭に、青い*が追加され、『liが末尾に追加』ボタンをクリックすると、末尾に、赤い*が追加される。 か…

jQueryで詰まった部分

【問題】スクロールした途中で、一番上まで戻るようにする ・id属性がright-bottom-naviの部分をクリックすると上まで戻るようにする。 【解決】 $(function(){ $('#right-bottom-navi').on('click',function(){ window.scrollTo(0,0); }); }); 上記のコード…

jQueryで複数の同じclass属性の要素からマウスホバーされたもの1つだけを選択する

開発環境は、Windows 7 Professional(32bit) + Firefox 58.0.2(32bit)です。複数の同じclass属性のボタン要素があったときに、どこか1箇所にマウスホバーすると同じclass属性の全部のボタンが変化してしまいます。それを防いで、マウスホバーした1箇所のみ変…

Javascript(jQuery)でタイマーを作る

開発環境は、Windows7 Professional(32bit)+firefox 57.0.2(32bit)+jQuery3.2.1。 <html lang="ja"> <head> <meta charset="utf-8"> <script src="jquery-3.2.1.min.js"></script> <style> </style> <script> var s_count = 0; var m_count = 0; var h_count = 0; $(document).ready(function(){ $(function(){ se…</meta></head></html>

javascript(jQuery)で四角形と円の当たり判定をする

開発環境は、Windows7 Professional(32bit)+firefox 57.0.2(32bit)+jQuery3.2.1。 <html lang="ja"> <head> <meta charset="utf-8"> <script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ var canvas = $("#rect")[0]; if(canvas.getContext){ var context = canvas.getContext('…</meta></head></html>