これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル | かちびと.net
Result 自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ 異なるコンテナに含まれる同一要素に自動でナンバリングします 結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します css body {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する | かちびと.net
Result いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで出来るところまでやってみた、的なもの :checkedや:notなどの疑似要素をふんだんに使って実装されていました これだけだと実用性はないけど単純に凄いなぁと感心したので備忘録 css /* smart-css todo boilerplate */ #smart-css:checked ~ #todos .dumb-thing { display: none } #smart-css:checked ~ #todos .smart-thing { display: block } #smart-css:checked ~ #todos .submit-unchanged { display: none } #smart-css:checked ~ #todos .todo-item { color:
jQueryスニペット：アニメーション付きの数字カウンター | かちびと.net
Result Webアプリなんかの登録者数アピール等やペラサイトのアフィリの類でよく見かけるやつです 0に戻してからeasingで元の数字に遷移させています jQuery$('.count').each(function () { $(this).prop('c',0).animate({ ｃ: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); });html<span class="count">2000</span>via
テーブルに自動で行数を表示する
Result tableに行数を表示します。疑似要素にcss-countersで加えています。 前後に任意のテキストも挿入できます。 cssbody {/*カウンターリセット*/ counter-reset: row-counter; } tr { position: relative; } tr:before {/*行の頭に疑似要素を追加してカウント*/ position: relative; padding: 10px; display: block; bottom: 0; counter-increment: row-counter; content: "第"counter(row-counter)"行目"; }html<table> <tr> <td>foo</td> <td>bar</td> <td>hoge</td> </tr> <tr> <td>foo</td> <td>ba
カウントダウンやタイマーなど、時間コンテンツなら何でも任せろのシンプルな軽量スクリプト -EasyTimer.js
時間を表示させるカウントダウン、タイマー、ストップウォッチなどのコンテンツなら何でも任せろのシンプルな軽量スクリプトを紹介します。 単体のスクリプトとして利用でき、時間を使ったWebページを実装する際に重宝すると思います。 EasyTimer.js EasyTimer.js -GitHub EasyTimer.jsの特徴 EasyTimer.jsのデモ EasyTimer.jsの使い方 EasyTimer.jsの特徴 リフレッシュの間隔は、時、分、秒、1/10秒に設定できます。 タイマーの開始、停止、一時停止など、すべてのタイプでイベントが設定できます。 カスタムコールバックを定義することができ、タイマーのリフレッシュごとに実行されます。 タイマーには、経過とカウントダウンの2種類があります。 開始時間と目標時間を設定できます。 EasyTimer.jsのデモ デモでは、EasyTimer
CSSだけでcheckboxのチェック数をカウントする
Result content: counter;を使ってチェック数をカウントする、というもの JSによるもののように応用は効きませんが、数えるだけなら css.languages {/*リセット*/ counter-reset: characters; } input:checked {/*チェックされたらカウント*/ counter-increment: characters; } .total:after {/*疑似要素で任意の場所にカウント結果を表示*/ content: counter(characters)"個の項目をチェックしています"; }html<div class="languages"> <div class="input-wrapper"> <input id="foo" type="checkbox"><label for="foo">foo</label> </d
[WordPress] WP_Queryで投稿取得後に全件数を求める | きほんのき
WP_Query()で投稿取得後、取得件数を知るにはpost_count、全件数を知るにはfound_postsを使います。 found_postsは、例えば以下のように、取得件数を指定してポストを取得した時に、取得数は制限しているものの、その条件にマッチする記事が全部で何件あるか知りたい場合に使います。 $args = array( "meta_key" => "foo", "meta_value" => "bar", "posts_per_page" => 10,//取得数は10に制限 ); $query = new WP_Query($args); $get_num = $query->post_count;//取得した数 $all_num = $query->found_posts;//全件数 表示は10件に限っておきますが、検索結果全体では何件あったかを知りたい場合や、ページャー
Excelで特定の文字が入力されたセルの合計をカウントする方法
Excelで特定の文字が入力されたセルの合計をカウントする方法を紹介します。 １．問題点 Excelで次のように、A1セルからE10セルに○と×が設定されたシートがあります。 ここから○がついたセルの合計を算出したいのですが、方法が分かりません。 ということで、Excelで特定の文字が入力されたセルの合計をカウントする方法を紹介します。 ２．特定の文字が入力されたセルの合計をカウントする 特定の文字が入力されたセルの合計をカウントするには、COUNTIF関数を用います。 冒頭のサンプルでA1セルからE10セルの○の数を調べるには、 =COUNTIF(A1:E10,"○") という式を任意のセル（ここではE12セル）に設定します。 これで「15」という合計が表示されます。 COUNTIF関数のパラメータは、 =COUNTIF(セル,検索条件） となります。
Twitterソーシャルボタンにツイート数を表示できるようになったので実装してみた
私のツイート数は53万です さて、Twitterの仕様変更に伴いこれまで表示されていたシェア数が消えてしまってがっくり来ていたのですが、digitiminimi Inc. / ディジティ・ミニミ様が提供しているWEBサービスwidgetoon.js & count.jsoonにて表示させることができるようになりました。実装方法をご紹介。 今回の記事はこちらの記事の追記的な感じです。 widgetoon.js & count.jsoonの登録 まずはwidgetoon.js & count.jsoon | digitiminimiへ行ってAPIが使用できるように登録します。 といってもサイトのURLとメールアドレスを入力してするだけ。総ツイート数によって取得の時間は変動しますが、私の場合は1日経ったら終わってました。 こんな感じでツイート数の取得が完了！ SNS Count Cacheプラグ
Bookmarkhub – 各種ソーシャルサービスの共有数を取得
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今はソーシャルブックマークやソーシャルネットワークなど、Webサービスがバイラルして知られていくための仕組みがたくさんあります。Delicious、はてなブックマークやFacebook、Twitter、Google+は有名なところでしょう。 そうした各種ブックマーク系サービスでどれだけの数シェアされているのか、それを確認できるのがBookmarkhubです。 Bookmarkhubの使い方 Bookmarkhubが対応しているのは以下のサービスです。 Twitter Facebook はてなブックマーク Google+ Pocket LinkedIn Delicious Pinterest StumbleUpon Reddit 実行すると次のようなデモが表示されます。 使い方も簡単
Windowsでファイルの行数を表示する方法
Windowsでファイルの行数を表示する方法を紹介します。 １．問題点 Linuxでファイルの行数を表示するには、wcコマンドが用意されています。 たとえばindex.htmlの行数を表示する場合、「wc -l ファイル名」と入力すれば行数が表示されます。 % wc -l index.html 実行結果 2036 index.html ですが、Windowsでファイルの行数を表示する方法が分かりません。 ２．Windowsでファイルの行数を表示する WindowsではLinuxのようなwcに相当するコマンドが用意されていません。 が、次のようにtypeコマンドとfindコマンドを組み合わせることで行数を表示することができます。 C:\>type ファイル名 | find /c /v "" たとえばindex.htmlの行数は次のようにしてカウントします。 C:\>type index.ht
Google Analyticsで自分のアクセスをカウントしないようにする方法
Google Analyticsで自分のアクセスをカウントしないようにする方法を紹介します。 １．はじめに Google Analyticsを設定しても、自分のアクセスをカウントさせてしまうとウェブサイトの適正なデータを取得・分析することができません。 ということで、Google Analyticsで自分のアクセスをカウントしないようにする方法を紹介します。 ２．Google Analyticsで自分のアクセスをカウントしないようにする 上部のメニューから「アナリティクス設定」をクリック。 「アカウント」欄の「すべてのフィルタ」をクリック。 「新しいフィルタ」をクリック。 次のようなフィルタ設定画面が開きます。 （クリックで拡大） フィルタ名に任意の名称を入力。ここでは「テスト」と入力します。 「フィルタの種類」はデフォルトの「定義済み」を選択した状態にします。 「フィルタの種類を選択」の
YouTubeの再生回数を取得する方法
YouTubeの再生回数を取得する方法を紹介します。 １．はじめに YouTubeに投稿した動画の再生回数は動画再生のページには表示されます（右下の赤枠部分）。 が、ブログなどに貼り付けた動画にこの再生回数を表示する方法が分かりません。 ということで、YouTubeの再生回数を取得・表示する方法を紹介します。 なお、再生回数が取得できるのは自分のアカウントで管理している動画に限ります。 ２．APIキーの取得 再生回数を取得するには、YouTube Data API（エントリー投稿時点ではv3）を利用します。 このAPIを利用するためのAPIキーの取得します。 Google Developers Consoleのページに移動して「API Project」をクリック（新しいプロジェクトを作成してもいいと思います）。 利用規約の更新ダイアログが表示されたらチェックボックスをチェックして「同意しま
ProgressBar.js - Progress bars with JavaScript
With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor. ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. Usage A simple cod
jQueryで要素数を取得する方法のまとめ
jQueryで要素数を数える方法のまとめです。 ここではul要素の子要素li要素の数を数えるサンプルを使って、いくつかの方法を紹介します。 size()メソッドは1.8から非推奨という指摘を頂いたので削除します。失礼致しました。 １．size()メソッドで数える まず、size()メソッドを使って要素数を数える方法です。 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function() { var size = $('li').size(); alert(size); }); </script> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> ２．lengthプロパティで数え
jQuery Novelist Plugin Demo
maxCharacters:100 Character limit. If the limit is not defined, the plugin will try get the value from the 'data-max-characters' attribute of the HTML element. Otherwise, the limit is set to the default value (100). hardLimit:true If set to true, all characters that go over the limit will be truncated. backgroundImage:'' Can be used to customize the background image. backgroundScale:false Should t
[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay
ページ全体にオーバーレイ、アニメーションでカウントダウン plainOverlayの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery-1.11.0.min.js"></script> <script src="jquery.plainoverlay.min.js"></script> </head> Step 2: HTML HTMLはオーバーレイを適用する時に指定できるようidをつけておくと便利です。 <body> <div id="demo">パネル</div> </body> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。基本書式は下記のようになります。 //show element.plainOverlay('sh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者ブロガー指南：Naifix-起業バカ
http://ideahacker.net/2014/02/15/7599/
