5.網頁控制LED和蜂鳴器

先利用網頁互動區，將控制的程式方塊完成(LED點矩陣腳位避開12、13、15)

開啟程式編輯

html程式碼
在html的<body>內加入以下程式碼，多一個顯示文字的區塊
1. <div><content id="content"></content></div>
CSS
把font-size改為30px
1. 1. 1. .db5 {
    2. font-size: 30px;
    3. outline: none;
    4. margin: 0 10px 10px 0;
    5. pointer-events: auto!important;
    6. }
Javascipt
在boardReady()程式內加入紅色字體部分

- 1. boardReady({board: 'Smart', device: 'mQA4G', transport: 'mqtt'}, function (board) {
  2. board.samplingInterval = 50;
  3. matrix = getMax7219(board, 14, 16, 0);
  4. buzzer = getBuzzer(board, 5);
  5. var content = $('#content');
  6. document.getElementById('demo-area-05-btn1').addEventListener('click',function () {
  7. matrix.animateStop();
  8. matrix.on('0000000000000000');
  9. matrix.on((max7219_number(1)));
  10. buzzer.play(buzzer_music([{ notes: 'C4', tempos: '2' }]).notes ,buzzer_music([{ notes: 'C4', tempos: '2' }]).tempos );
  11. content.append('Do ');
  12. });
  13. document.getElementById('demo-area-05-btn2').addEventListener('click',function () {
  14. matrix.animateStop();
  15. matrix.on('0000000000000000');
  16. matrix.on((max7219_number(2)));
  17. buzzer.play(buzzer_music([{ notes: 'D4', tempos: '2' }]).notes ,buzzer_music([{ notes: 'D4', tempos: '2' }]).tempos );
  18. content.append('Re ');
  19. });
  20. document.getElementById('demo-area-05-btn3').addEventListener('click',function () {
  21. matrix.animateStop();
  22. matrix.on('0000000000000000');
  23. matrix.on((max7219_number(3)));
  24. buzzer.play(buzzer_music([{ notes: 'E4', tempos: '2' }]).notes ,buzzer_music([{ notes: 'E4', tempos: '2' }]).tempos );
  25. content.append('Mi ');
  26. });
  27. document.getElementById('demo-area-05-btn4').addEventListener('click',function () {
  28. matrix.animateStop();
  29. matrix.on('0000000000000000');
  30. matrix.on((max7219_number(4)));
  31. buzzer.play(buzzer_music([{ notes: 'F4', tempos: '2' }]).notes ,buzzer_music([{ notes: 'F4', tempos: '2' }]).tempos );
  32. content.append('Fa ');
  33. });
  34. document.getElementById('demo-area-05-btn5').addEventListener('click',function () {
  35. matrix.animateStop();
  36. matrix.on('0000000000000000');
  37. matrix.on((max7219_number(5)));
  38. buzzer.play(buzzer_music([{ notes: 'G4', tempos: '2' }]).notes ,buzzer_music([{ notes: 'G4', tempos: '2' }]).tempos );
  39. content.append('So ');
  40. });
  41. });

1. 可發布網頁，使用手機執行控制LED和蜂鳴器

Page updated

Google Sites

Report abuse