Javascript 跨平台APP雲端設計研習營: 3月 2016

2016年3月30日星期三

2016年3月23日星期三

<!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>

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

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

++緩衝

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8
{float:left; width:320px; height:200px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
body {

-webkit-background-size:cover;

background-image:url(https://i.ytimg.com/vi/V7_91CPqjbI/maxresdefault.jpg);}
</style>

</head>

<body>

<video id="video1" controls="controls" draggable="true" ondragstart="drag(event)" id="drag4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

<button onclick="getFirstBuffRange()" type="button" draggable="true" ondragstart="drag(event)" id="drag7" />緩衝範圍</button>
<button onclick="getPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag1" />默認的播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag2" />慢速播放</button>
<button onclick="setPlaySpeed1()"type="button" draggable="true" ondragstart="drag(event)" id="drag3" />加速播放</button>
<button onclick="enableLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag4" />啟用循環</button>
<button onclick="disableLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag5" />禁用循環</button>
<button onclick="checkLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag6" />檢查循環的狀況</button>

<br />
<br />

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

myVid=document.getElementById("video1");
function getPlaySpeed()
{
alert(myVid.defaultPlaybackRate);
}
function setPlaySpeed()
{
myVid.defaultPlaybackRate=0.5;
myVid.load();
}
function setPlaySpeed1()
{
myVid.defaultPlaybackRate=2;
myVid.load();
}
function enableLoop()
{
myVid.loop=true;
myVid.load();
}
function disableLoop()
{
myVid.loop=false;
myVid.load();
}
function checkLoop()
{
alert(myVid.loop);
}

myVid=document.getElementById("video1");
function getFirstBuffRange()
{
alert("Start: " + myVid.buffered.start(0) + " End: " + myVid.buffered.end(0));
}
</script>
</html>

2016年3月16日星期三

畫圈圈

新功能+++++++++背景css

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8
{float:left; width:320px; height:200px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
body {

-webkit-background-size:cover;

background-image:url(https://i.ytimg.com/vi/V7_91CPqjbI/maxresdefault.jpg);}
</style>

</head>

<body>
<video id="video1" controls="controls" draggable="true" ondragstart="drag(event)" id="drag4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

<button onclick="getPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag1" />默認的播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag2" />慢速播放</button>
<button onclick="setPlaySpeed1()"type="button" draggable="true" ondragstart="drag(event)" id="drag3" />加速播放</button>
<button onclick="enableLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag4" />啟用循環</button>
<button onclick="disableLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag5" />禁用循環</button>
<button onclick="checkLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag6" />檢查循環的狀況</button>

<br />
<br />

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

myVid=document.getElementById("video1");
function getPlaySpeed()
{
alert(myVid.defaultPlaybackRate);
}
function setPlaySpeed()
{
myVid.defaultPlaybackRate=0.5;
myVid.load();
}
function setPlaySpeed1()
{
myVid.defaultPlaybackRate=2;
myVid.load();
}
function enableLoop()
{
myVid.loop=true;
myVid.load();
}
function disableLoop()
{
myVid.loop=false;
myVid.load();
}
function checkLoop()
{
alert(myVid.loop);
}
</script>
</html>

青眼白龍

<html>
<head>

<style type="text/css">
body {
-webkit-background-size:cover;
background-image:url(http://ruby.komica.org/pix/img8329.jpg);}
</style>

</head>

<body></body>

</html>

2016年3月9日星期三

將影音托放

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8
{float:left; width:320px; height:200px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>

</head>

<body>
<video id="video1" controls="controls" draggable="true" ondragstart="drag(event)" id="drag4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

<button onclick="getPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag1" />默認的播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag2" />慢速播放</button>
<button onclick="setPlaySpeed1()"type="button" draggable="true" ondragstart="drag(event)" id="drag3" />加速播放</button>
<br />
<br />

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

myVid=document.getElementById("video1");
function getPlaySpeed()
{
alert(myVid.defaultPlaybackRate);
}
function setPlaySpeed()
{
myVid.defaultPlaybackRate=0.5;
myVid.load();
}
function setPlaySpeed1()
{
myVid.defaultPlaybackRate=2;
myVid.load();
}
</script>
</html>

將影音加速慢速+托放

加速或慢速程式碼

<!DOCTYPE html>
<html>
<body>

<button onclick="getPlaySpeed()" type="button">默认的播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button">把视频设置为慢速播放</button>
<button onclick="setPlaySpeed1()" type="button">把视频设置为加速播放</button>
<br />
<br />
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

<script>
myVid=document.getElementById("video1");
function getPlaySpeed()
{
alert(myVid.defaultPlaybackRate);
}
function setPlaySpeed()
{
myVid.defaultPlaybackRate=0.5;
myVid.load();
}
function setPlaySpeed1()
{
myVid.defaultPlaybackRate=2;
myVid.load();
}
</script>

</body>
</html>

速度加減速的表示

2016年3月2日星期三

熊熊大中小播放

熊熊改~播放/暫停大中小

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/.mp4" type="video/mp4" />
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig()
{
myVideo.width=560;
}

function makeSmall()
{
myVideo.width=320;
}

function makeNormal()
{
myVideo.width=420;
}
</script>

</body>
</html>

熊熊原始

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

熊

訂閱：文章 (Atom)

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

2016年3月30日星期三

朽葉たる枯樹

脫衣

2016年3月23日星期三

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

星星改

star原始

地圖改

地圖

++緩衝

2016年3月16日星期三

畫圈圈

新功能+++++++++背景css

青眼白龍

2016年3月9日星期三

將影音托放

將影音加速慢速+托放

加速或慢速程式碼

速度加減速的表示

2016年3月2日星期三

熊熊大中小播放

熊熊改~播放/暫停大中小

熊熊原始

熊

2016年3月30日 星期三

2016年3月23日 星期三

2016年3月16日 星期三

2016年3月9日 星期三

2016年3月2日 星期三

2016年3月30日星期三

2016年3月23日星期三

2016年3月16日星期三

2016年3月9日星期三

2016年3月2日星期三