我想将我的javascript代码转换为角度....有人可以帮助我吗？我是棱角分明的新手

问题描述：

我创建了一个HTML5画布代码来生成矩形块，并在每次单击按钮时使用JavaScript创建一个新块。并且，每次单击块时，都会显示一些数据。此数据存储在本地Web存储（SQLite）中。现在，我已经使用HTMLL5 canvas，JavaScript，JQuery，SQLite完成了所有这些工作。我现在的任务是将整个事物转换成Angular，但我不熟悉它。有人可以帮帮我。

我尝试过：

HTML

I created a HTML5 canvas code to generate rectangular blocks and used JavaScript to create a new block every time a button is clicked. And, every time the block is clicked, some data is displayed. This data is stored in the local web storage (SQLite). Now, I've done all this using HTMLL5 canvas, JavaScript, JQuery, SQLite. I'm now tasked with converting the whole thing into Angular, but I'm unfamiliar with it. Can someone please help me out.

What I have tried:

HTML

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>

<br><br>
<script src="myjs.js"></script>
         

<button type="button" id="button">
Create
</button>
<p id="demo"></p>
<canvas id="test" class="test"></canvas>
      <div id = "status" name = "status"></div> 

</body>
</html>

Javascript

$(document).ready(function(){

var c = document.getElementById("test");
var ctx=c.getContext("2d");
var h=ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';    
ctx.fillRect(20, 20, 150, 100);
	ctx.font="30px Arial";

	ctx.fillText(0,250,75);
			ctx.stroke();
				var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    var j=Math.random()*4;
	var k=Math.random()*4;

         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOG11 (id,id1)'); 
            tx.executeSql('INSERT INTO LOG11 (id,id1) VALUES (?,?)',[j,k]); 
              });
		 

	c.addEventListener('click', function(event) {
            document.getElementById("demo").innerHTML="Transaction id is "+j+"<br />"+"Transaction id is "+k;
        


});
   
  

$('#button').click(function() {
     var el = $("#test"),  
     newone = el.clone(true);
     el.before(newone);//This line is added just for styling
	 

});

var i=0;

$('#button').click(function() {
	i++;
	var j=Math.random()*4;
	var k=Math.random()*4;
      
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';    
ctx2.fillRect(20, 20, 150, 100);
	
		ctx2.font="30px Arial";
	ctx2.fillText(i,250,75 );
	ctx2.stroke();

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
var msg;
	db.transaction(function (tx) { 
            tx.executeSql('INSERT INTO LOG11 (id,id1) VALUES (?,?)',[j,k]); 
         });
		 
	
	e.addEventListener('click', function(event) {
            document.getElementById("demo").innerHTML="Transaction id is "+j+"<br />"+"Transaction id is "+k;

    
});

});
});

答

（document）.ready（function（）{

var c = document.getElementById（test）;
var ctx = c.getContext（2d）;
var h = ctx.fillStyle ='hsl（'+ 360 * Math.random（） +'，50％，50％）';
ctx.fillRect（20,20,150,100）;
ctx.font =30px Arial;

ctx .fillText（0,250,75）;
ctx.stroke（）;
var db = openDatabase（'mydb'，'1.0'，'Test DB'，2 * 1024 * 1024）;
var msg;
var j = Math.random（）* 4;
var k = Math.random（）* 4;

db.transaction（function（tx） {
tx.executeSql（'CREATE TABLE IF NOT EXISTS LOG11（id，id1）'）;
tx.executeSql（'INSERT INTO LOG11（id，id1）VALUES（？，？）'，[ j，k]）;
}）;

c.addEventListener（'click'，function（event）{
document.getElementById（demo） .innerHTML =交易ID为+ j +< br />+交易ID为+ k;

}）;

(document).ready(function(){ var c = document.getElementById("test"); var ctx=c.getContext("2d"); var h=ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'; ctx.fillRect(20, 20, 150, 100); ctx.font="30px Arial"; ctx.fillText(0,250,75); ctx.stroke(); var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; var j=Math.random()*4; var k=Math.random()*4; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOG11 (id,id1)'); tx.executeSql('INSERT INTO LOG11 (id,id1) VALUES (?,?)',[j,k]); }); c.addEventListener('click', function(event) { document.getElementById("demo").innerHTML="Transaction id is "+j+"<br />"+"Transaction id is "+k; });

（'＃button'）。click（function（）{
var el =

('#button').click(function() { var el =

（＃test），
newone = el.clone（true）;
el.before（newone）; //此行仅用于样式化

}）;

var i = 0;

("#test"), newone = el.clone(true); el.before(newone);//This line is added just for styling }); var i=0;

我想将我的javascript代码转换为角度....有人可以帮助我吗？我是棱角分明的新手

相关推荐