ajax†
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var data = "1234";
$.ajax({
type: "GET",
url: "/hogehoge",
data:{
query: data
},
cache: false,
timeout: 1000
}).then(
function(data){
console.log("success:"+data);
},
function(data){
console.log("failed:"+data);
}
);
});
</script>
</head>
<body>
</body>
</html>
data に入れないと IE で url encode されない
google map†
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>google map</title>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<style type="text/css">
html,body,#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
$(function() {
var options = {
zoom: 12,
center: new google.maps.LatLng(35.6811673, 139.7670516),
};
var map = new google.maps.Map( $("#map")[0], options);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
localhost 以外の場合は api key を入れないといけない
progress bar†
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.1/sprintf.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Economica" rel="stylesheet">
<style type="text/css">
.progress {
width: 100px;
}
.progress .border {
border-width: 1px;
border-style: solid;
border-color: #a0a0ff;
}
.progress .bar {
height: 3px;
background-color: #e0e0ff;
}
.progress .num{
text-align: center;
font-family: 'Economica';
color: #a0a0ff;
}
</style>
<script type="text/javascript">
$(function() {
var progress = 0;
function init(){
setInterval(tick , 10);
}
function tick(){
if(progress < 100){
progress+=0.1;
$(".bar").css("width",progress+"%");
$(".num").text(sprintf("%02d%%",progress));
}
}
init();
});
</script>
</head>
<body>
<div class="progress">
<div class="num"></div>
<div class="border"><div class="bar"></div></div>
</div>
</body>
</html>
縦横センタリング†
<head>
<style>
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div style="background-color:red; width:500px; height:400px;">
<div class="center" style="background-color:blue; width:100px; height:100px;">ほげ</div>
</div>
</body>