JavaScript でキー入力に応じて HTML の要素の値とスタイルを変化させる
JavaScript でブラウザのウィンドウのリサイズに合わせて HTML の要素の値を更新 のつづき 1. JavaScript によるHTML要素の動的な変化 JavaScript を用いて、HTML の要素を動的に変化させたい。 例 下図に示すように、左上のフォームのテキストフィールドに、ユーザがキーボードで入力したのに応じて、右下のフォームのフィールドの数値をインクリメントする。 同時にフィールドの下にある HTML の要素の幅を広げる。 キーの入力に対応させるには、keydown, keypress, keyup のイベントハンドラを利用する。 ソースコード <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN"> <html> <head> <title>increment</title> <meta http
javascriptでformの値を動的に取得する - (ﾟ∀ﾟ)o彡 sasata299's blog
2008年08月03日03:25 JavaScript javascriptでformの値を動的に取得する 今日はjavascriptでformの値を動的に取得するやり方のメモ。IEでもFFでも対応できます。formの要素が変わっても大丈夫(｡･ω･)ﾉﾞ <html> <head></head> <body> <form id="form1"> <input type="text" name="aaa" value="1"> <input type="text" name="bbb" value="2"> <input type="submit" name="submit" value="検索"> </form> <script type="text/javascript"> var forms = document.getElementById("form1"); var array
[jQuery] エフェクトの後にremove()したい時にはqueue(callback) - yprops.com/notes
引き続きJavaScript をいじっています。 勝手が違って悶えていますが、だいぶ慣れてきました。 jQuery のすばらしさにしびれていたらまんまとハマった点について。 ■やりたいこと フェードアウト後にそのエレメントを削除 ■うまくいかない式 $('#some_element').fadeOut(300).remove(); //エレメントは、フェードアウトせず、すぐに消える。 ■原因 キューに入るメソッドと入らないメソッドがあるため。 ■説明 １） jQuery クラスのメソッドは、戻り値として自身のオブジェクトを返してくれるので、続けて処理したいメソッドは続けて記述できる（= メソッドチェーン)。 ２） エフェクトに分類されるメソッドのほとんどは、一旦キューに溜まってから実行されるため、前のエフェクトの終了を待って動いてくれる。 ３） 1) と 2) は互い
Free Web Design Resources - Freebiesbug
Free Design ResourcesA huge and ever-growing selection of 1770+ Free Design Resources created by top designers and developers. Choose from an extensive selection of fonts, graphic and HTML website templates, icons, mockups, and much more! A free set of smartphone and tablet mockups for Figma that you can use to present your work to the client in the most effective way possible.
JavaScript のスコープを理解する - tacamy--blog
スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。 スコープの種類 JavaScript のスコープには、グローバル変数とローカル変数の 2 種類あります。 グローバル変数 ローカル変数 関数の外（トップレベル）で宣言した変数 関数の中で宣言した変数, 関数の仮引数 プログラム全体から参照できる その関数の中でのみ参照できる ブロックスコープは存在しない Java などの言語では、if や for などの {} で囲まれたブロックごとにもブロックスコープがありますが、JavaScript には存在しません。 JavaScript でどうしてもブロックスコープを使いたい場合は、with 命令を使う方法や、無名関数を定義と同時に呼び出すなどの方法で、擬似的にブロックスコープを作ることは可能です。 補足 : let を使うとブロックスコープがつくれると教
Projects • Lea Verou
Ordered mostly by release date, with those with the most impact featured first. Please note that this mainly contains open source tools I’ve developed, and is only a subset of my work. It does not contain any of my work designing web technologies, documenting web platform design principles or doing design reviews for proposed web technologies as a W3C TAG member, or any of my early entrepreneurial
Motion 1, 三角関数 - Notes
このエントリーは、アニメーション・モーションを JavaScript で記述するための覚え書きです。いままで実務で使ってきたわざをちょっと整理してみます。 まずは、モーション設計をする上でよく使う三角関数について、おさらいとして触れます。もっともぼくは数学の素養は乏しいので、あやしいところもあるかもしれません。 三角関数おさらい 三角関数を使うと、直角三角形のある角の大きさが定まった時の、各線の長さを求めることができます。 図のように、角度θの時の底辺の長さはsin(θ)、高さはcos(θ)になります。 例えばθが45°の時は cos(30°) ≓ 0.707 sin(30°) ≓ 0.707（1 : 1 : √2） 60°（上の図）の時は cos(60°) = 0.5 sin(60°) ≓ 0.8660（1 : 2 : √3 ですね） 90°（垂直線）の時は cos(90°) = 0 s
WonderHTML5Wall
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
要素の中心から拡大するようなアニメーションをjQueryを使って再現してみる | WebDelog
「要素の中心から拡大するようなアニメーション作ってください」さてどうする どういうことかというと、 CSS3を使えばtransform-orignを50% 50%にすることで 変形の中心点をすらすことができるので、 これとtransitionやanimationプロパティを組み合わせれば 簡単に実現出来ますね！ 「IEで動きませけんど…」 そうでした。 IEを忘れていました。 transitionやanimationはIE10からしか使うことができませんので、 動かすことが必須の場合はこの方法では利用できませんね。 JavaScriptの力を借りましょう jQueryにはshow()やanimate()という便利なメソッドが用意されています。 これらを使いましょう。 今回は、CSSで予めdisplay:none、widthとheightを0にしておいて、 animation(
第2回 座標の回転を理解する─ブラウザで操作できるJavaScript座標回転プログラム | gihyo.jp
前回の回転するプロペラですが、ソースを見るとsinやらcosやらが出てきます。いわゆる三角関数というやつですが、得意な方は少ないかも知れません（中には見るとジンマシンが出るという方もいらっしゃるかも知れません）。 今回はこのあたりの座標操作を、直観的にわかるように解説していきましょう。 座標回転の基本 まず、座標について復習しておきましょう。普通、座標というのは「右に5、上に3」のような形を取ります。「右に5」の部分をx座標、「上に3」の部分をy座標と呼びます。 この座標で長方形を描くのは簡単です。ではなぜ前回のプログラムではややこしいことをしていたのでしょうか。それは、プロペラの回転は、x座標とy座標だけではできないからですね。どうすれば長方形を回転させた座標を計算できるでしょうか。 これには「右に5、上に3」というのを2つに分けて考えます。まず「右に5」の部分は（0, 0）から
[jQuery/Javascript]jQueryによる無限ループするアニメーションと三角関数の話 | Wood-Roots:blog
DEMO 最近はキービジュアルにFlashを使用せずにJavascriptによるアニメーションを使うことが増えてきました。GalleryViewのようなスライドショーふうのプラグインを設置するだけのケースも多いですが、ちょっとでも凝ったことをしたいと思い考えたり調べたりしていると三角関数がなかなか使えるということが分かってきました。 正直苦手な内容の話なのですが、簡単な処理のために使う程度ならコピペで何とかなりました。 余談ですが・・・三角関数とは 言うまでもありませんが、サイン・コサイン・タンジェントというやつです。確か高1か高2の数学で習うものだったように思います。アニメーションで使用するのは大抵sinとcosです。 y = sin(x) という式の場合、xが増えていってもyは-1と+1の間の値しか取りません。グラフにあらわすと波線（正弦波といわれるもの）になります。 要素を回転させ続
三角関数を使ったjavascriptアニメーション - jsdo.it - Share JavaScript, HTML5 and CSS
自分の練習用です。 ボタンを押すと、回転点が増えます。 いっぱい作ると、沢山の点がウネウネ動いて気持ち悪いですww /*参考サイト：http://amachang.sakura.ne.jp/misc/ut/*/ var el = document.getElementById('obj'); el.style.position = 'absolute'; el.style.top = '0px'; var sineWaveX = function(x) { return (Math.sin(x * Math.PI) / 2) + 0.5; }; var sineWaveY = function(y){ return (Math.cos(y * Math.PI) / 2) + 0.5; }; function circleMove(w,h,element) { var x = 0; var
三角関数で円運動｜｜HTML5
HTML5 <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8" /> <title>三角関数と円｜Trigonometric function and circle</title> <link href="css/base.css" rel="stylesheet" type="text/css"> <script src="js/base.js"></script> </head> <body> <div id="contents"> <canvas id="canvas" width="100" height="100"> </canvas> </div> </body> </html> CSS3 @charset "utf-8"; body { margin:0; padding:0; background-co
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://eikyo48.umin.jp/symbol.html