2017-11-07 9 views
0

私は電子機器でマンマシンインターフェースを作成することに興味があります。スタートレックの生活看板でデモをしようとしています。ここでhttp://jsfiddle.net/anex6vmq/電子内でjavascriptアニメーションを実行しています

が私のHTMLとJavascriptです::

<html> 
<head> 
    <style> 
    div.a { 
     width: 50px; 
     height: 50px; 
     background-color: red; 
     position: fixed; 
    } 
    </style> 
</head> 
<body background="startrekbg.png"> 
    <div class='a'></div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     animateDiv(); 
    }); 
    function makeNewPosition() { 
     // Get viewport dimensions (remove the dimension of the div) 
     var h = $(window).height() - 500; 
     var w = $(window).width() - 500; 
     var nh = Math.floor(Math.random() * h); 
     var nw = Math.floor(Math.random() * w); 
     //var nw = 777; 
     return [nh, nw]; 
    } 
    function animateDiv() { 
     var newq = makeNewPosition(); 
     $('.a').animate({ top: newq[0], left: newq[1] }, function() { 
     animateDiv(); 
     }); 

    }; 
    </script> 
</body> 
</html> 

main.jsコード:

const {app, BrowserWindow} = require('electron') 

let mainWindow 

app.on('ready',() => { 
    mainWindow = new BrowserWindow({ 
    height: 670, 
    width: 995, 
    frame: false 
    }) 
    mainWindow.loadURL('file://' + __dirname + '/animation.html') 
}) 

そして、私のpackage.json:簡単に上下に移動しするように変更され、このコードを発見

`{ 
    "name": "Sick Bay Scanner by H.A. Hobson", 
    "version": "1.0.1", 
    "main": "main.js" 
}` 

私は主にC、PHP、Pythonで動作します。多くのJavaScriptをやったことはありませんが、NodeとElectronは非常にエキサイティングなことを学びます。ご注意いただきありがとうございます。それはNode.jsの中で動作させるために更なる操作を必要とする、

+0

エラーが正確に何ですか?それがjqueryについて - もし私が何を考えているのか - Electronでこのスレッドを使う方法を見てください:https://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework – pergy

+0

@perty:ありがとう!エラーは次のようです:ReferenceError:$は定義されていません。私はjqueryをインストールしてサイトを見てきました。まだ運がない – hahobson

+0

まあ、同じことをやって、あなたのコードに成功しました( 'npm i jquery'と' windowを追加する$ window.jQuery = require( 'jquery'); 'の最初の行に'

関連する問題