このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

PHPで簡易アンケート パーセンテージバー追加編

PHP

2011.02.26

この記事は最終更新日から1年以上が経過しています。

前回のPHPで簡易アンケート にパーセンテージ表示するバーの設置方法です。

ではバーの作成を

HTML

 <p class="r4">【男性】%<span class="bar"></span></p>
<p class="r5">【女性】%<span class="bar"></span></p>

CSS

#yesNoArea .bar{
display:block;
width:100%;
height:15px;
background:#03C;
}
#yesNoArea .r5 .bar{
background:#F03;
}

前回のファイルにこれらのHTML,CSSを追加。

このような表示になります。

では男性と女性の%の数値を求めましょう。

PHP

$manPar = ($yes/$count*100);
$manPar = number_format($manPar, 1, '.', '');
$womanPar = (($count-$yes)/$count*100);
$womanPar = number_format($womanPar, 1, '.', '');

男性の%は 男性数値÷トータル数値×100 で求められます。

気をつける点は、このままだと、ダァーと小数点以下の数値が求められてしまうので、

number_format関数

number_format($manPar, 1, '.', '');

小数点1桁にしております。

また女性の%数値の計算式は

トータル数値-男性数値÷トータル数値*100 で求められます。

男性の%数値同様number_format関数で小数点1桁にします。

また、round関数でも同様に求められます。

round($manPar,1)

それらをHTML反映

HTML

<p class="r4">【男性】<?php echo $manPar;?>%<span class="bar" style="width:<?php echo $manPar;?>%;"></span></p>
<p class="r5">【女性】<?php echo $womanPar;?>%<span class="bar" style="width:<?php echo $womanPar;?>%;"></span></p>

それぞれの数値表示にecho関数で表示させ、表示バー部分はインラインスタイルシートで

widthの指定を%で行い、そのままecho関数で値を読み込めば完成!

デモページはこちらから

Comment

Related Article

php 7.4にアップデート

2023.12.24

Laravel 4 を PHP 7 環境へ移行したお話。

2018.06.10

PHP 簡易アクセスログ 出力

2016.04.29

Laravelを 別環境に移動したら画面が真っ白に。MacにComposer、php mcrypt 等をインストールしたお話。

2015.10.10

遅れましたが..あけましておめでとうございます!2015年は Laravelで画像処理。からということで。

2015.01.08

IDE phpstorm, IntelliJ IDEAの Database接続が便利すぎる件(Vagrant + IntelliJ IDEA でMySQL操作)

2014.11.29

Laravel4でもSmartyを使用したい!

2014.11.20

人気急上昇!PHPフレームワーク「Laravel」を使ってみました。簡易会員サイト作成編

2014.09.24

Laravel4 パーミッションエラー Vagrant パーミッションが変更しない件

2014.08.24

【CentOS6】 PHP5.3からPHP5.5にバージョンアップしました

2014.08.11

CATEGORY LIST

LATEST NEWS

ご、ごめん。。今はFlutterの気分じゃないんだ。。

Flutter

2025.05.30

AIのために働け。AI リーダブルコーディングな未来。

AI・Bot・algorithm

2025.05.21

Rustでつくる ふっかつのじゅもん

Rust

2025.04.29

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その5

Rust

2025.04.14

う、動くぞ! Mac mini Apple M4 Pro で PS3ソフトを遊ぶ。RPCS3 Mac版を起動

Game

2025.04.12

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その4

Rust

2025.04.10

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その3

Rust

2025.04.08

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その2

Rust

2025.04.07

時代を先取りし過ぎた ニューラルネットワークが導入されたゲーム『がんばれ森川君2号』を令和に嗜んでみる。

Game

2025.04.06

Tauri(Rust) × AI で作る GitGUIクライアントアプリ その1

Rust

2025.04.05

keyring-rsで、Macのキーチェーンに登録する。

Rust

2025.04.04

RustとWebAssemblyによるゲーム開発 Webpack5対応

Rust

2025.03.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US