Category Archives: JavaScript

setInterval or setTimeout

LEUNG 沒有迴響

setInterval

<!DOCTYPE html>
<html>
	<head>
		<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
	</head>
	<body>
		<input type="button" value="Start count!" onclick="startTimer()"> 
		<input type="button" value="Stop count!" onclick="stopTimer()"> 
		<br/>
		<div id="countdown_text">Placeholding text</div>
		<script type="text/javascript">
			var timer = null, 
			value = 0;

			function startTimer(){
				if (timer !== null) return;
				timer = setInterval(function () {
					document.getElementById('countdown_text').innerHTML = ++value;
				}, 1000); 
			}

			function stopTimer(){
				clearInterval(timer);
				timer = null
			}		
		</script>
	</body>
</html>

setTimeout

<!DOCTYPE html>
<html>
<body>
	<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
		<button onclick="startCount()">start</button>
		<button onclick="stopCount()">stop</button>
		<div id="countdown_text">Placeholding text</div>

		<script>
			var c = 0;
			var t;
			var timer_is_on = 0;

			function timedCount() {
				document.getElementById('countdown_text').innerHTML = c;
				c = c + 1;
				t = setTimeout(
						function(){ 
							timedCount() 
						}, 1000
					);
			}

			function startCount() {
				if (!timer_is_on) {
					timer_is_on = 1;
					timedCount();
				}
			}

			function stopCount() {
				clearTimeout(t);
				timer_is_on = 0;
			}
		</script>
</body>
</html>

Remark :
setTimeout (無限loop)
setTimeout (僅行一次)

ECharts

LEUNG 沒有迴響

echarts

ECharts，一個使用JavaScript 實現的開源可視化庫，可以流暢的運行在PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

豐富的可視化類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用於BI 的漏斗圖，儀錶盤，並且支持圖與圖之間的混搭。

Reference : http://echarts.baidu.com/

Example : http://echarts.baidu.com/examples/index.html#chart-type-line

Chart.js

LEUNG 沒有迴響

chart.js

Simple yet flexible JavaScript charting for designers & developers

Reference : https://www.chartjs.org/

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Reference : https://d3js.org/

Google Map – Message in location point

LEUNG 沒有迴響

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<script type="text/javascript">
function GoogleMap(){
    this.getMap = function(id, title, longitude, latitude, str){
        $(document).ready(function() {
            var map;
            var myLatlng = new google.maps.LatLng(longitude, latitude);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: true
            }

            map = new google.maps.Map(document.getElementById(id), myOptions);
            var image = "sort_down.png";
            var location = new google.maps.LatLng(longitude, latitude);
            var marker1 = new google.maps.Marker({
                position: location,
                icon: image,
                map: map
            });

            var infowindow1 = new google.maps.InfoWindow({
                content: str
            });

            var marker1 = new google.maps.Marker({
                position: location,
                icon: image,
                map: map,
                title: title
            });

            google.maps.event.addListener(marker1, 'click', function() {
                infowindow1.open(map,marker1);
            });
        });
    }
}
var googleMap = new GoogleMap();
googleMap.getMap("id", "Title", 22.316374, 114.18040 , "Hello World");
</script>
<div id="id" style="width: 500px; height: 300px;"></div>