ZuoTi.Pro
Question

Please help me~~~~ using javascript, Display a text field so that the user can enter an...

Please help me~~~~ using javascript,

Display a text field so that the user can enter an integer. Display two buttons “Start Animation” and “Stop Animation”. When the button “Start Animation” is clicked, the web page displays an animated times table in the following manner. For example, if the user entered the number 6, then the animation displays 6 x 1 = 6, one second later it replaces it with 6 x 2 = 12, one second later it replaces it with 6 x 3 = 18, etc. If it is 6 x 9 = 54, then one second later it becomes 6 x 1 = 6, and then 6 x 2 = 12, and so on. When the button “Stop Animation” is clicked, then the web page stops the animation. Whatever the equation is currently displayed will stay there on the page.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Hi, please find the solution and upvote the answer.

<html>
  
  
<head>
<title>Search Contact form
</title></head>
<script>
var loop = true;
var ctxt;
var inc =1;
  
function start(){
  
  
var numb = document.getElementById("textt").value;
setInterval(runn,1000,numb);
}
function runn(numb){
if(!loop){
return;
}
var x = document.createElement("CANVAS");//creating a canvas everytime, some issues on chrome for redrawing.
ctxt = x.getContext("2d");//get context
ctxt.font = "40px Verdana";
if(inc==10) inc=1;
var val = numb*inc;//calc next val
ctxt.fillText(numb +"*"+inc+" ="+ val,10,30 );//put text
inc = inc+1;//increment
var divv = document.createElement('div');
document.getElementById("appendDiv").innerHTML = "";
document.getElementById("appendDiv").appendChild(x);
  
}

//this function is called when user clicks on stop animation button
function stop(){
loop=false;
  
}
  
</script>
<body>
<div>
<input type="number" id="textt" >
<button id="startt" onclick="start()">Start Animation</button>
<button id="stop" onclick="stop()">Stop Animation</button>
  
  
</div>
<div id="appendDiv"></div>

</body>

</html>

'Sample output: Working great.

0 0
Add a comment
Know the answer?
Add Answer to:
Please help me~~~~ using javascript, Display a text field so that the user can enter an...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Create a web page like the one shown here. The user can enter a number n,...

    Create a web page like the one shown here. The user can enter a number n, and when the button is clicked, the Harshad numbers between 1 and n are displayed: linking an html file with a javascript file. Count 'em! Find and Count the Niven Numbers Between 1 and: 200 Number of Nivens: 59 Niven Numbers: 1 23456789 10 12 18 20 21 24 27 30 36 40 42 45 48 50 54 60 63 70 72 80 81...

  • This is python3. Please help me out. Develop the following GUI interface to allow the user...

    This is python3. Please help me out. Develop the following GUI interface to allow the user to specify the number of rows and number of columns of cards to be shown to the user. Show default values 2 and 2 for number of rows and number of columns. The buttons "New Game" and "Turn Over" span two column-cells each. Fig 1. The GUI when the program first starts. When the user clicks the "New Game" button, the program will read...

  • Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...

    Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO: Change The Title</title>    </head>    <body>      <h1></h1>      <p>First paragraph.</p>      <p class="intro">Second <span>paragraph</span>.</p>      <button id="start">Start</button>      <main> </main>      <!--       Test 6: DOM Programming       You MAY consult the notes for week 7, but you MAY NOT discuss this test or       your code with any other students.  All work must be your own.       Instructions:              1. Put all solution code in a file named solution.js.  When you upload your          solution to...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • IT Review    JAVASCRIPT (Can someone please help me answer the below questions. It would be nice...

    IT Review    JAVASCRIPT (Can someone please help me answer the below questions. It would be nice if you add comments explaining what you are doing? If unable to add comments the answer would be fantastic. Thank you. Given the following function definition: function percent(x) {      return x / 100; } Which of the following statements correctly calls the percent function: percent(10); percent: 10; percent(); percent = 10; Indicate whether each of the following evaluates to true or false, given...

  • Problems: Develop a web page that allows a user to try out different text and background...

    Problems: Develop a web page that allows a user to try out different text and background color combinations by clicking buttons. Use Javascript to implement the functionalities. Below are two screen shots of the working application. Clicking the buttons at the bottom changes either the foreground color or the background color. The following descriptions are about the details. Specifically, you have to implement: An HTML file should include the following features (3 points) Some texts (Anything you like) Put the...

  • This homework problem has me pulling my hair out. We are working with text files in Java using Ne...

    This homework problem has me pulling my hair out. We are working with text files in Java using NetBeans GUI application. We're suppose to make a movie list and be able to pull up movies already in the text file (which I can do) and also be able to add and delete movies to and from the file (which is what I'm having trouble with). I've attached the specifications and the movie list if you need it. Any help would...

  • Easy Javascript questions You can use window.history to retrieve the history object. Using the history object, what methods can you call to navigate backwards and forward to web pages that have been...

    Easy Javascript questions You can use window.history to retrieve the history object. Using the history object, what methods can you call to navigate backwards and forward to web pages that have been visited recently? The answer is not in the book. See https://developer.mozilla.org/en-US/docs/Web/API/History. Think about the situation where the alert message displays “your reply was false.” Describe the type of person who would generate that output—someone who always tells the truth, someone who always lies, or some other type of...

  • C++ Fraction calculator Need help with code, cant use "using namespace std" Objectives Create and use...

    C++ Fraction calculator Need help with code, cant use "using namespace std" Objectives Create and use functions. Use a custom library and namespace. Use reference variables as parameters to return values from functions. Create a robust user interface with input error checking. Use exceptions to indicate errors. Resources kishio.h kishio.cpp Assignment requirements You will need eight methods (including main). One is given to you. Their requirements are specified below: menu: The menu function takes no arguments, but returns a char...

  • WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic...

    WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the following using JavaScript. Do not modify the HTML file. When you see this symbol: save and refresh the browser (this should happen automatically if you are using Brackets with Live Preview), then check your code to make sure it is working before you proceed. 1. Create two variables called "playerX" and "playero". Set them to the DOM element with...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT