Panda Ryan Ответов: 0

Я хочу преобразовать свой javascript-код в angular....может ли кто-нибудь помочь мне, пожалуйста? Я новичок в angular

Я создал код HTML5 canvas для генерации прямоугольных блоков и использовал JavaScript для создания нового блока каждый раз, когда нажимается кнопка. И каждый раз, когда блок щелкается, отображаются некоторые данные. Эти данные хранятся в локальном веб-хранилище (SQLite). Теперь я сделал все это с помощью HTMLL5 canvas, JavaScript, JQuery, SQLite. Теперь мне поручено преобразовать все это в Angular, но я с ним не знаком. Может кто-нибудь мне помочь?

Что я уже пробовал:

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;

    
});

});
});

0 Ответов