The closer you look, the less you see!
We also have a number of JavaScript samples that can be explored. While we do not provide the source for these samples directly, you are free to use the dev tools within your favorite web browser to check out the …
Wat is jQuery UI? jQuery UIÂ is de User Interface API van jQuery. Het is een uitbereiding van de jQuery libary met een aantal handige functies en een stylesheet voor standaard stijlen. Sommige veel gebruikte jQuery plugins zijn verbeterd en geplaatst …
Wat is jQuery? JQuery is een vrij JavaScript-framework voor dynamische en interactieve websites, onder andere voor het bewerken van het DOM en CSS en interactie met de webserver (ook bekend als AJAX). De ontwikkeling van jQuery is begonnen door de …
Dit voorbeeld laat zien hoe je een MP3 bestand (audio.mp3) afspeelt via een javascript met behulp van jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <title>Java MP3 Speler</title> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div class="play">[Play]</div> <div class="pause">[Stop]</div> <script> $(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'audio.mp3'); audioElement.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); audioElement.addEventListener("load", function() { audioElement.play(); }, true); $('.Play').click(function() { audioElement.play(); }); $('.Pause').click(function() { audioElement.pause(); }); }); </script> </body> </html> |
Bron:Â stackoverflow.com [#//javascript/javascript_audio_afspelen_voorbeeld” ]
In dit voorbeeld laat ik zien hoe je met een Javascript een XML bestand kan uitlezen. Hieronder vind je een voorbeeld bestand, welke we gaan uitlezen, je kan een bestand aanmaken en deze inhoud kopiëren en plakken:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<project naam="Mijn project" eigenaar="DomoticX"> <subproject naam="Een subproject" info="Oud"> <tekst>Hallo wereld!</tekst> <datum>2014.01.01</datum> <admin bericht="Dit is het oude project!"/> </subproject> <subproject naam="Tweede subproject" info="Nieuw"> <tekst>Hallo maan!</tekst> <datum>2015.02.02</datum> <admin bericht="Dit is het nieuwe project!"/> </subproject> </project> |
Het Javascript (bijvoorbeeld index.html …
Ik maak gebruik van deze handleiding om gegevens vanuit een PHP bestand te laden in een Javascript die een AREA weergeeft. Wat heb je nodig?: 1) HighCharts 4.x Ik heb het bestand “examples/area-basic/index.html” uit de bibliotheek genomen als voorbeeld voor het uitlezen …
Highcharts gegevens uit MySQL database halen (PHP script) Lees meer »
Ik maak gebruik van deze handleiding om gegevens vanuit een PHP bestand te laden in een Javascript die een PIE weergeeft. Wat heb je nodig?: 1) Highcharts 4.x Ik heb het bestand “examples/pie-basic/index.html” uit de bibliotheek genomen als voorbeeld voor het uitlezen …
In deze handleiding staan een aantal voorbeelden van grafieken met gebruik van de h5chart bibliotheek. Wat heb je nodig? 1) h5chart Thermometer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Thermometer voorbeeld</title> <head> <!-- Inladen van 'Core' bibliotheken --> <SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT> <!-- Inladen van 'Chart' bibliotheken --> <SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-thermometer.js"></SCRIPT> </head> <canvas id="c" width="100px" height="160px" style="border: 1 px solid blue;"></canvas> <script> var canvas = document.getElementById("c"); canvas.initRegionManager(); var l = new Thermometer(); l.set( { left : 5, top : 5, width: 90, height: 150, min : 10, max : 25, intervals: 10, current: 19, uid: getCanvasObjectUid("c"), animate: true }); l.setLabelStyle({ mask : function (val){ return val;} , font : '11px Arial', color: 'grey' }); l.setCurrentStyle({ mask : function (val){ return val + " C";} , font : 'bold 14px Arial', color: 'grey' }); l.draw("c"); </script> </html> |
Digitale meter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Digitale meter voorbeeld</title> <head> <!-- Inladen van 'Core' bibliotheken --> <SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT> <!-- Inladen van 'Chart' bibliotheken --> <SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-digital.js"></SCRIPT> </head> <canvas id="c" width="150px" height="50px" style="border: 1 px solid blue;" ></canvas> <script> var canvas = document.getElementById("c"); canvas.initRegionManager(); var l=new DigitalMeter(); l.set( { left : 0, top : 0, width: 150, height: 50, digits: 4, decimals: 1, current: 25.3, signed: true, background: true, animate: true, uid: getCanvasObjectUid("c"), animateCounter: 20 }); // Getallen tot 10 weergeven als ROOD = #FA0000 // Knipperen (paar keer) = 'blink : true' l.serie.add({value:10,color:"#FA0000",blink : true}); // Getallen tot 20 weergeven als GEEL = #F0F000 l.serie.add({value:20,color:"#F0F000"}); // Getallen tot 20 weergeven als GROEN = #00FA00 l.serie.add({value:30,color:"#00FA00"}); l.draw("c"); </script> </html> |
LED
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>LED voorbeeld</title> <head> <!-- Inladen van 'Core' bibliotheken --> <SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT> <!-- Inladen van 'Chart' bibliotheken --> <SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-signal.js"></SCRIPT> </head> <canvas id="c" width="40px" height="40px" style="border: 1 px solid blue;" ></canvas> <script> var canvas = document.getElementById("c"); canvas.initRegionManager(); var l=new Signal(); l.set( { left : 5, top : 5, width: 30, height: 30, orientation: 'horizontal', single: false, current: 20, style: '3D', animate: true, uid: getCanvasObjectUid("c"), animateCounter: 5}); l.serie.add({value:100,color:"#800000"}); //l.serie.add({value:20,color:"#808000",blink : true}); //l.serie.add({value:30,color:"#008000"}); //l.serie.add({value:40,color:"#008080"}); l.setTooltipStyle({ mask : function (val){ return "Current value: " + val;} , font : '14px Arial', color: 'grey' }); l.draw("c"); </script> </html> |
Ik heb hier een PHP script inelkaar gezet voor op je webserver, zodat je kan KAKU kan schakelen waar ook ter wereld via een PHP script. Het script is niets meer of minder dan een parameter doorgeefluik naar KAKUcli, alleen …
KAKU – Schakelen via internet met menu (PHP en Javascript) Lees meer »
Hieronder staat een stukje javascript om voorloopnullen voor een getal te plaatsen, zo kan een datum ‘2014-6-8’ eruit zien als ‘2014-06-08’ en een tijd ‘0:5:20′ als ’00:05:20′. Er is standaard geen functie in javascript om dit te doen, er zijn …
Javascript – voorloopnullen toevoegen aan een getal Lees meer »