ウェブ学のすすめ

Study of Web Design & Programing

PHPで現在の時刻を表示する方法

PHP

プレビュー

f:id:vinton:20140202193659p:plain

↓別ウィンドウを開いて見る
http://webgaku.biz/time/

↓QRコード

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格： 無料

ポイント

date()関数

日付・時刻をフォーマット文字(Y,m,d,g,iなど)で整形して表示する関数

Y年を4桁で表示（西暦）
m月を2桁で表示
d日付を2桁で表示
G時。24時間単位。先頭にゼロを付けない。
g時。12時間単位。先頭にゼロを付けない。
i分を2桁で表示
s秒を2桁で表示

コード

php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>time</title>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:700' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<?php 
		echo "<p>".date("Y.m.d")."</p>";
		
		echo "<p>".date("G：i：s")."</p>";
?>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@charset "utf-8";

body {
	background-color:#333;
	color:#fff;
	font-size:3em;
	font-family: 'Source Code Pro', sans-serif;
	
	-webkit-animation: shining 2s infinite;
}

@-webkit-keyframes shining {
    0% { -webkit-text-shadow: 0 0 10px #FFD700; text-shadow: 0 0 10px #FFD700; }
    10% { -webkit-text-shadow: 0 0 20px #FFD700; text-shadow: 0 0 20px #FFD700;}
		20% { -webkit-text-shadow: 0 0 30px #FFD700; text-shadow: 0 0 30px #FFD700;}
		30% { -webkit-text-shadow: 0 0 40px #FFD700; text-shadow: 0 0 40px #FFD700;}
		40% { -webkit-text-shadow: 0 0 50px #FFD700; text-shadow: 0 0 50px #FFD700;}
		50% { -webkit-text-shadow: 0 0 60px #FFD700; text-shadow: 0 0 60px #FFD700;}
		60% { -webkit-text-shadow: 0 0 50px #FFD700; text-shadow: 0 0 50px #FFD700;}
		70% { -webkit-text-shadow: 0 0 40px #FFD700; text-shadow: 0 0 40px #FFD700;}
		80% { -webkit-text-shadow: 0 0 30px #FFD700; text-shadow: 0 0 30px #FFD700;}
		90% { -webkit-text-shadow: 0 0 20px #FFD700; text-shadow: 0 0 20px #FFD700;}
    100% { -webkit-text-shadow: 0 0 10px #FFD700; text-shadow: 0 0 10px #FFD700;}
}

#container {
	position:absolute;
	width:300px;
	height:100px;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-160px;
	text-align:center;
}
JavaScript
window.addEventListener('load',
	function(){
		setTimeout(function(){
			scrollTo(0,1);
		},100);
	},
false);