相対パスは
../hoge.php
更に上は
../../hoge.php
Category: HTML5
json
{
"frames": {
"chaingun.png": {
"frame": {
"x": 1766,
"y": 202,
"w": 42,
"h": 34
},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {
"x": 38,
"y": 32,
"w": 42,
"h": 34
},
"sourceSize": {
"w": 128,
"h": 128
}
},
"chaingun_impact.png": {
"frame": {
"x": 1162,
"y": 322,
"w": 38,
"h": 34
},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {
"x": 110,
"y": 111,
"w": 38,
"h": 34
},
"sourceSize": {
"w": 256,
"h": 256
}
},
"chaingun_impact_0000.png": {
"frame": {
"x": 494,
"y": 260,
"w": 22,
"h": 22
},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {
"x": 113,
"y": 108,
"w": 22,
"h": 22
},
"sourceSize": {
"w": 256,
"h": 256
}
},
"chaingun_impact_0001.png": {
"frame": {
"x": 1500,
"y": 1904,
"w": 34,
"h": 30
},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {
"x": 104,
"y": 104,
"w": 34,
"h": 30
},
"sourceSize": {
"w": 256,
"h": 256
}
},
"chaingun_impact_0002.png": {
"frame": {
"x": 888,
"y": 366,
"w": 38,
"h": 32
},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {
"x": 106,
"y": 105,
"w": 38,
"h": 32
},
"sourceSize": {
"w": 256,
"h": 256
}
},
"chaingun_impact_0003.png": {
"frame": {
"x": 990,
"y": 84,
"w": 32,
"h": 28
},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {
"x": 113,
"y": 109,
"w": 32,
"h": 28
},
"sourceSize": {
"w": 256,
"h": 256
}
}
},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "assets/grits_effects.png",
"format": "RGBA8888",
"size": {
"w": 2048,
"h": 2048
},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:a5e0b1932a348d048c58a625408c4276$"
}
}
parseAtlasDefinition: function (atlasJSON){
var parsed = JSON.parse(atlasJSON);
for(var key in parsed.frames){
var sprite = parsed.frames[key];
var cx = -sprite.frame.w * 0.5;
var cy = -sprite.frame.h * 0.5;
// Define the sprite for this sheet.
this.defSprite(key, sprite.frame.x, sprite.frame.y, sprite.frame.z)
}
}
});
function drawSprite(spritename, posX, posY){
}
function __drawSpriteInternal(spt, sheet, posX, posY){
}
var gSpriteSheets = {};
SpriteSheetClass = Class.exnted({
});
function drawSprite(spritename, posX, posY){
for(var sheetName in gSpriteSheets){
var sheet = gSpriteSheetsd[sheetName];
var sprite = sheet.getStats(spritename);
if(sprite == null) continue;
__drawSpriteInternal(sprite, sheet, posX, posY);
return;
}
}
Strong password
at least n characters
combination of upper- and lower-case characters
one or more digits
not related to other user data (name, address, username, …)
not a dictionary word
<script type="text/javascript">
function checkForm(form)
{
if(form.username.value == ""){
alert("Error: Username cannot be blank!");
form.username.focus();
return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)){
alert("Error: Username must only letters, numbers and undersocres!");
form.username.focus();
return false;
}
if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value){
if(form.pwd1.value.length < 6){
alert("Error: Password must contain at least six characters!");
form.pwd1.focus();
return false;
}
if(form.pwd1.value == form.username.value){
alert("Error: Password must be different from Username!");
form.pwd1.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.pwd1.value)){
alert("Error: password must contain at least one number(0-9)!");
form.pwd1.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.pwd1.value)){
alert("Error: password must contain at least one lowercase letter(a-z"!);
form.pwd1.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.pwd1.value)){
alert("Error: password must contain at least one uppercase letter(A-Z");
form.pwd1.focus();
return false;
}
} else {
alert("Error: Please check that you've entered and confirmed your password!");
form.pwd1.focus();
return false;
}
alert("You entered a valid password: " + form.pwd1.value);
return true;
}
</script>
<form ... onsubmit="return checkForm(this);">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="pwd1"></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>
Event holder
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz - Placeholder</title>
</head>
<body>
<form action="#">
<label for="event-name">
<span>Enter the name of your event:</span>
<input type="text" id="event-name" placeholder="Event Name">
</label>
</form>
</body>
</html>
autocomplete
The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz - Autocomplete</title>
</head>
<body>
<form action="#">
<label for="email">
<span>Email:</span>
<input type="email" id="email" placeholder="example@gmail.com" autocomplete="email">
</label>
</form>
</body>
</html>
contact-form
Check input type with mozilla.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
<form class="date-and-time-picker"> <label for="date"> <span>what day do you want to leave?</span> <input id="date" type="date"> </label> <label for="time"> <span>What time do you want to leave?</span> <input id="time" type="date-time"> </label> </form>
data list
<input list="nano"> <datalist id="nano"> <option value="Android"></option> <option value="Data Analyst"></option> <option value="Front End"></option> <option value="Full Stack"></option> <option value="Intro to Programming"></option> <option value="iOS"></option> <option value="Tech Entrepreneur"></option> </datalist>
Another datalist
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz - Datalists</title>
</head>
<body>
<p>What kind of event are you hosting?</p>
<input list="event">
<datalist id="event">
<option>Party</option>
<option>Meeting</option>
<option>Conference Talk</option>
<option>Sports Game</option>
</datalist>
</body>
</html>
<form> <label for="use-billing"> <span>Same as billing address</span> </label> <input type="checkbox" id="use-billing"> <br> <label for="tel-number"> <span>Telephone Number</span> <input type="tel" id="tel-number"> </label> </form>
The process of DOM
Characters -> Tokens -> Nodes -> DOM
Request page -> GET html -> page head(build DOM, render) -> search result(build DOM, render)
Characters -> Tokens -> Nodes -> CSSOM
hi tag is faster evaluation than div p tag as dom tree.
JavaScript is parser blocking
Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Although originally designed for use with Node.js and installable via npm install –save async, it can also be used directly in the browser.
単語帳
表と裏をdocument.getElementByIdで、divタグのidから呼び出しています。CSS3でカードflipはtransform: rotateY(180deg);と表現します。
リフェレンス
KeyCode:The KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
keyup:Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>単語帳</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background: #e0e0e0;
text-align: center;
font-family: Verdana, sans-serif;
color: #fff;
}
#btn {
width: 200px;
margin: 0 auto;
padding: 7px;
border-radius: 5px;
background: #00aaff;
box-shadow: 0 4px 0 #0088cc;
cursor: pointer;
}
#btn:hover{
opacity: 0.8;
}
#card {
margin: 60px auto 20px;
width: 400px;
height: 100px;
cursor: pointer;
font-size: 38px;
line-height: 100px;
perspective: 100px;
transform-style: preserve-3d;
transition: transform .8s;
}
#card-front, #card-back {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
position: absolute;
backface-visibility: hidden;
}
#card-front {
background: #fff;
color: #333;
}
#card-back {
background: #00aaff;
transform: rotateY(180deg);
}
.open {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="card">
<div id="card-front"></div>
<div id="card-back"></div>
</div>
<div id="btn">NEXT</div>
<script>
(function(){
'use strict'
var words = [
{'en': 'read', 'ja':'読む'},
{'en': 'write', 'ja':'書く'},
{'en': 'eat', 'ja':'食べる'},
{'en': 'run', 'ja':'走る'},
{'en': 'walk', 'ja':'歩く'}
];
var card = document.getElementById('card');
var cardFront = document.getElementById('card-front');
var cardBack = document.getElementById('card-back');
var btn = document.getElementById('btn');
card.addEventListener('click', function(){
flip();
});
btn.addEventListener('click', function(){
next();
});
function next(){
if (card.className === 'open') {
card.addEventListener('transitioned', setCard);
flip();
} else {
setCard();
}
}
function setCard(){
var num = Math.floor(Math.random() * words.length);
cardFront.innerHTML = words[num]['en'];
cardBack.innerHTML = words[num]['ja'];
card.removeEventListener('transitioned', setCard);
}
setCard();
window.addEventListener('keyup', function(e){
if (e.keyCode === 70){
flip();
} else if (e.keyCode === 78){
next();
}
});
function flip(){
card.className = card.className === '' ? 'open' : '';
}
})();
</script>
</body>
</html>
スロットマシーン
classNameにactive、inactiveをつけて、opacityを変えます。また、addEventListenerで、クリックされた際に、Math.floor(Math.random() * (n + 1))で、ランダムな数値を取得し、配列に返し、それぞれの数字が一致するか、チェックして、opacityを変えます。実際のスロットは、もう少し複雑な設定方法だと思いますが、原理としては近いものがあるのではないでしょうか。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slot Machine</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #e0e0e0;
font-family: Arial, sans-serif;
text-align: center;
font-size: 16px;
margin-top: 30px;
}
.panel {
display: inline-block;
width: 60px;
padding: 7px;
border-radius: 5px;
margin-bottom: 15px;
color: #00aaff;
font-weight: bold;
font-size: 32px;
line-height: 64px;
background: #fff;
}
.panel + .panel {
margin-left: 10px;
}
.panel.unmatched {
opacity: 0.5;
}
.btn {
display: inline-block;
width: 60px;
padding: 7px;
border-radius: 5px;
margin-bottom: 15px;
color: #fff;
box-shadow: 0 4px 0 #0088cc;
background: #00aaff;
cursor: pointer;
}
.btn + .btn {
margin-left: 10px;
}
.btn.inactive{
opacity: 0.5;
}
#spinButton {
margin: 0 auto;
width: 240px;
padding: 7px;
border-radius: 5px;
color: #fff;
box-shadow: 0 4px 0 #e91b0c;
background: #f44336;
cursor: pointer;
}
#spin.inactive{
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<div class="panel" id="panel0">?</div>
<div class="panel" id="panel1">?</div>
<div class="panel" id="panel2">?</div>
</div>
<div>
<div class="btn inactive" id="btn0">STOP</div>
<div class="btn inactive" id="btn1">STOP</div>
<div class="btn inactive" id="btn2">STOP</div>
</div>
<div id="spinButton">SPIN</div>
<script>
(function(){
'use strict';
var panels = ['1', '3', '5', '7'];
var timers = [];
var results = [];
var stopCount = 0;
var isPlaying = false;
var panel0 = document.getElementById('panel0');
var panel1 = document.getElementById('panel1');
var panel2 = document.getElementById('panel2');
var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var spinButton = document.getElementById('spinButton');
spinButton.addEventListener('click', function(){
if (isPlaying) return;
isPlaying = true;
this.className = 'inactive';
btn0.className = 'btn';
btn1.className = 'btn';
btn2.className = 'btn';
panel0.className = 'panel';
panel1.className = 'panel';
panel2.className = 'panel';
runSlot(0, panel0);
runSlot(1, panel1);
runSlot(2, panel2);
});
function runSlot(n, panel){
panel.innerHTML = panels[Math.floor(Math.random() * panels.length)];
timers[n] = setTimeout(function(){
runSlot(n, panel)
}, 50);
}
btn0.addEventListener('click', function(){
stopSlot(0, panel0, this);
});
btn1.addEventListener('click', function(){
stopSlot(1, panel1, this);
});
btn2.addEventListener('click', function(){
stopSlot(2, panel2, this);
});
function stopSlot(n, panel, btn){
if (!isPlaying || results[n] !== undefined) return;
btn.className = 'btn inactive';
clearTimeout(timers[n]);
results[n] = panel.innerHTML;
stopCount++;
if (stopCount === 3){
checkResults();
isPlaying = false;
timers = [];
results = [];
stopCount = 0;
spintButton.ClassName = '';
}
}
function checkResults(){
if (results[0] !== results[1] && results[0] !== results[2]) {
panel0.className = 'panel unmatched';
}
if (results[1] !== results[0] && results[1] !== results[2]) {
panel1.className = 'panel unmatched';
}
if (results[2] !== results[0] && results[2] !== results[1]) {
panel2.className = 'panel unmatched';
}
}
})();
</script>
</body>
</html>
font-awesomeのハンバーガー
document.getElementByIdで、アイコンがクリックされた際に、document.body.className = ‘menu-open’とdocument.body.className = ”を返します。なお、font-awesomeはCDNで取得します。
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top Menu Tab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
padding: 0;
margin: 0;
font-family: Verdana, sans-serif;
background: #eee;
color: #333;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#cover {
background: #000;
opacity: 0.6;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
z-index:1;
display: none;
}
#menu {
z-index:2;
position: absolute;
top: 0;
right: -180px;
color: #fff;
background: #4c81e9;
padding: 8px;
box-sizing: border-box;
width: 180px;
min-height: 100%;
transition: .4s;
}
#show, #hide {
float: right;
cursor: pointer;
}
body.menu-open {
overflow-y: hidden;
}
body.menu-open #cover {
display: block;
}
body.menu-open #menu {
right: 0;
}
</style>
</head>
<body>
<i class="fa fa-bars" id="show"></i>
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
<div id="cover"></div>
<div id="menu">
<i class="fa fa-times" id="hide"></i>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<script>
(function(){
'use strict';
var show = document.getElementById('show');
var hide = document.getElementById('hide');
show.addEventListener('click', function(){
document.body.className = 'menu-open'
});
hide.addEventListener('click', function(){
document.body.className = ''
});
})();
</script>
</body>
</html>
クリッカブルタブメニュー
event.preventDefault()
If this method is called, the default action of the event will not be triggered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top Menu Tab</title>
<style>
body {
padding:0;
margin:0;
font-family: Verdana, sans-serif;
}
.container {
padding: 0;
margin: 30px auto;
width: 500px;
background: #dce0e0;
}
ul.menu {
list-style: none;
padding: 0;
margin: 0;
font-size: 0;
}
ul.menu li {
display: inline-block;
}
ul.menu li a {
display: inline-block;
font-size: 14px;
width: 80px;
height: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
padding: 7px;
color: #333;
}
ul.menu li a.active {
background: #353d3e;
color: #fff;
}
ul.menu li a:not(.active):hover {
opacity: 0.5;
transition: .8s;
}
.content {
font-size: 14px;
padding: 7px 10px;
line-height: 1.4;
background: #353d3e;
color: #fff;
min-height: 150px;
display: none;
}
.content.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#" data-id="about" class="active menu_item">About</a></li>
<li><a href="#" data-id="service" class="menu_item">Service</a></li>
<li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
</ul>
<div class="content active" id="about">
Lorem1 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
</div>
<div class="content" id="service">
Lorem2 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
</div>
<div class="content" id="contact">
Lorem3 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
</div>
<p></p>
<script>
(function(){
'use strict'
var menuItems = document.getElementsByClassName('menu_item');
var contents = document.getElementsByClassName('content');
var i;
for (i=0; i < menuItems.length; i++){
menuItems[i].addEventListener('click', function(e){
e.preventDefault();
var i;
for (i=0; i < menuItems.length; i++){
menuItems[i].className = 'menu_item';
}
this.className = 'menu_item active';
var i;
for (i=0; i < contents.length; i++){
contents[i].className = 'content';
}
document.getElementById(this.dataset.id).className = 'content active';
});
}
})();
</script>
</body>
</html>