Javascript 跨平台APP雲端設計研習營

灯泡来点亮或熄灭--範例

<!DOCTYPE html>
<html>
<body>
<img id="myimage" onclick="changeImage()" src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

<script>
var i;
i=0;

var j;
for (j = 0; j < 10; j++) {
changeImage();
}

function changeImage()
{
i=i+1;
element=document.getElementById('myimage')
if (element.src.match("bulbon") && i==2)
{
isleep(1000);
element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
i=0;
alert("關燈");
}
if (element.src.match("bulboff") && i==2)
{
isleep(1000);
i=0;
element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
alert("開燈");
}
}

function isleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
</script>

</body>
</html>

星星改

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
canvas {
border: solid white 1px;
background-color: red;
}
</style>
</head>
<body>

<canvas id="MyCanvas" width="400" height="400">
抱歉！瀏覽器不支援HTML5 canvas。<br />No canvas support in this browser
</canvas>

<script type="text/javascript">
var canvas = document.getElementById("MyCanvas");
var cW = canvas.width/2;
var cH = canvas.height/2;

function draw() {
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear area for repeated use

// Set the angle between each vertex (5 internal, 5 external)
var vertAngle = (2 * Math.PI) / 10;

// Size of star
var radius = 200;
// Star center point
var starCenter = [0, 0]
// Translate our coordinates so 0,0 is in the center of the canvas
ctx.translate(cW, cH);

// And rotate it 1 degrees（公式：弧度 = 角度 x Pi / 180）
ctx.rotate((1000000000000000000 * Math.PI) / 180);

// Start shape, blue lines, yellow fill
ctx.beginPath();
// Build the star hitting 10 points (11 to complete)
for (var i = 11; i != 0; i--) {
var r = radius * (i % 2 + 0.5) / 2; // Alternate between inside and outside points
var curAngle = vertAngle * i; // Calculate angle of the current point
ctx.lineTo((r * Math.sin(curAngle)) + starCenter[0], (r * Math.cos(curAngle)) + starCenter[1]);
}

// Fill and stroke
ctx.strokeStyle = "white"; //藍色框線
ctx.lineWidth = "5"
ctx.fillStyle = "black"; //黃色（星星內部，填滿顏色）
ctx.stroke();
ctx.fill();

// Reset the translate so clearRect works correctly
ctx.translate(-cW, -cH);
}
}

//******************************************************
animate(); //動畫效果，會旋轉的原因！

// Animate calls the draw function every time the system lets it draw
function animate() {
draw();
// requestAnimationFrame is a one shot function, needs to keep calling itself
window.requestAnimationFrame(animate); //動畫效果，會旋轉的原因！
}
//******************************************************
</script>


</body>
</html>

star原始

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
canvas {
border: solid blue 1px;
background-color: red;
}
</style>
</head>
<body>

<canvas id="MyCanvas" width="400" height="400">
抱歉！瀏覽器不支援HTML5 canvas。<br />No canvas support in this browser
</canvas>

<script type="text/javascript">
var canvas = document.getElementById("MyCanvas");
var cW = canvas.width/2;
var cH = canvas.height/2;

function draw() {
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear area for repeated use

// Set the angle between each vertex (5 internal, 5 external)
var vertAngle = (2 * Math.PI) / 10;

// Size of star
var radius = 175;
// Star center point
var starCenter = [0, 0]
// Translate our coordinates so 0,0 is in the center of the canvas
ctx.translate(cW, cH);

// And rotate it 1 degrees（公式：弧度 = 角度 x Pi / 180）
ctx.rotate((1 * Math.PI) / 180);

// Start shape, blue lines, yellow fill
ctx.beginPath();
// Build the star hitting 10 points (11 to complete)
for (var i = 11; i != 0; i--) {
var r = radius * (i % 2 + 1) / 2; // Alternate between inside and outside points
var curAngle = vertAngle * i; // Calculate angle of the current point
ctx.lineTo((r * Math.sin(curAngle)) + starCenter[0], (r * Math.cos(curAngle)) + starCenter[1]);
}

// Fill and stroke
ctx.strokeStyle = "blue"; //藍色框線
ctx.lineWidth = "5"
ctx.fillStyle = "yellow"; //黃色（星星內部，填滿顏色）
ctx.stroke();
ctx.fill();

// Reset the translate so clearRect works correctly
ctx.translate(-cW, -cH);
}
}

//******************************************************
animate(); //動畫效果，會旋轉的原因！

// Animate calls the draw function every time the system lets it draw
function animate() {
draw();
// requestAnimationFrame is a one shot function, needs to keep calling itself
window.requestAnimationFrame(animate); //動畫效果，會旋轉的原因！
}
//******************************************************
</script>


</body>
</html>

地圖改

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}

function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';

var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

地圖

<html>
	<body>
	<p id="demo1">点击这个按钮，获得您的坐标：</p>
	<button onclick="getLocation1()">试一下</button>

	<p id="demo">点击这个按钮，获得您的位置：</p>
	<button onclick="getLocation()">试一下</button>

	<div id="mapholder"></div>
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

	<script>

	var x=document.getElementById("demo");
	function getLocation()
	{
	if (navigator.geolocation)
	{
	navigator.geolocation.getCurrentPosition(showPosition,showError);
	}
	else{x.innerHTML="Geolocation is not supported by this browser.";}
	}

	function showPosition(position)
	{
	lat=position.coords.latitude;
	lon=position.coords.longitude;
	latlon=new google.maps.LatLng(lat, lon)
	mapholder=document.getElementById('mapholder')
	mapholder.style.height='250px';
	mapholder.style.width='500px';

	var myOptions={
	center:latlon,zoom:14,
	mapTypeId:google.maps.MapTypeId.ROADMAP,
	mapTypeControl:false,
	navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
	};
	var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
	var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
	}

	function showError(error)
	{
	switch(error.code)
	{
	case error.PERMISSION_DENIED:
	x.innerHTML="User denied the request for Geolocation."
	break;
	case error.POSITION_UNAVAILABLE:
	x.innerHTML="Location information is unavailable."
	break;
	case error.TIMEOUT:
	x.innerHTML="The request to get user location timed out."
	break;
	case error.UNKNOWN_ERROR:
	x.innerHTML="An unknown error occurred."
	break;
	}
	}

	var c=document.getElementById("demo1");
	function getLocation1()
	{
	if (navigator.geolocation)
	{
	navigator.geolocation.getCurrentPosition(showPosition1);
	}
	else{c.innerHTML="Geolocation is not supported by this browser.";}
	}
	function showPosition1(position)
	{
	c.innerHTML="Latitude: " + position.coords.latitude +
	"<br />Longitude: " + position.coords.longitude;
	}
	</script>
	</body>
	</html>

点击这个按钮，获得您的坐标：

点击这个按钮，获得您的位置：

Javascript 跨平台APP雲端設計研習營

2016年3月30日星期三

朽葉たる枯樹

脫衣

2016年3月23日星期三

灯泡来点亮或熄灭--範例

星星改

star原始

地圖改

地圖

2016年3月30日 星期三

2016年3月23日 星期三

2016年3月30日星期三

2016年3月23日星期三