<script>
document.write(1+1)
document.write("<hr>")
document.write(2*2)
</script>
<script>
document.write(1+1)
document.write("<hr>")
document.write(2*2)
document.write("<hr>")
document.write(3/2)
</script>
<canvas id="rects" width="500" height="500">
<script>
my_canvas = document.getElementById("rects")
my_context = my_canvas.getContext("2d")
my_context.fillStyle = "red"
my_context.fillRect(0, 0, 100, 250)
my_context.fillStyle = "green"
my_context.fillRect(0+50, 0+50, 100, 250)
my_context.fillStyle = "blue"
my_context.fillRect(0+50+50, 0+50+50, 100, 250)
</script>
<div class="calculator">
<div class="input" id="input"></div>
<div class="buttons">
<div class="operators">
<div>+</div>
<div>-</div>
<div>×</div>
<div>÷</div>
</div>
<div class="leftPanel">
<div class="numbers">
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="numbers">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="numbers">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="numbers">
<div>0</div>
<div>.</div>
<div id="clear">C</div>
</div>
</div>
<div class="equal" id="result">=</div>
</div>
</div>
<style>
body {
width: 506px;
margin: 4% auto;
font-family: 'Source Sans Pro', sans-serif;
letter-spacing: 5px;
font-size: 1.8rem;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.calculator {
padding: 20px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-radius: 1px;
}
.input {
border: 1px solid #ddd;
border-radius: 1px;
height: 60px;
padding-right: 15px;
padding-top: 10px;
text-align: right;
margin-right: 6px;
font-size: 2.5rem;
overflow-x: auto;
transition: all .2s ease-in-out;
}
.input:hover {
border: 1px solid #bbb;
-webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.buttons {}
.operators {}
.operators div {
display: inline-block;
border: 1px solid #bbb;
border-radius: 1px;
width: 80px;
text-align: center;
padding: 10px;
margin: 20px 4px 10px 0;
cursor: pointer;
background-color: #ddd;
transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}
.operators div:hover {
background-color: #ddd;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-color: #aaa;
}
.operators div:active {
font-weight: bold;
}
.leftPanel {
display: inline-block;
}
.numbers div {
display: inline-block;
border: 1px solid #ddd;
border-radius: 1px;
width: 80px;
text-align: center;
padding: 10px;
margin: 10px 4px 10px 0;
cursor: pointer;
background-color: #f9f9f9;
transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}
.numbers div:hover {
background-color: #f1f1f1;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-color: #bbb;
}
.numbers div:active {
font-weight: bold;
}
div.equal {
display: inline-block;
border: 1px solid #3079ED;
border-radius: 1px;
width: 17%;
text-align: center;
padding: 127px 10px;
margin: 10px 6px 10px 0;
vertical-align: top;
cursor: pointer;
color: #FFF;
background-color: #4d90fe;
transition: all .2s ease-in-out;
}
div.equal:hover {
background-color: #307CF9;
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border-color: #1857BB;
}
div.equal:active {
font-weight: bold;
}
</style>
<script>
"use strict";
var input = document.getElementById('input'), // input/output button
number = document.querySelectorAll('.numbers div'), // number buttons
operator = document.querySelectorAll('.operators div'), // operator buttons
result = document.getElementById('result'), // equal button
clear = document.getElementById('clear'), // clear button
resultDisplayed = false; // flag to keep an eye on what output is displayed
// adding click handlers to number buttons
for (var i = 0; i < number.length; i++) {
number[i].addEventListener("click", function(e) {
// storing current input string and its last character in variables - used later
var currentString = input.innerHTML;
var lastChar = currentString[currentString.length - 1];
// if result is not diplayed, just keep adding
if (resultDisplayed === false) {
input.innerHTML += e.target.innerHTML;
} else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
// if result is currently displayed and user pressed an operator
// we need to keep on adding to the string for next operation
resultDisplayed = false;
input.innerHTML += e.target.innerHTML;
} else {
// if result is currently displayed and user pressed a number
// we need clear the input string and add the new input to start the new opration
resultDisplayed = false;
input.innerHTML = "";
input.innerHTML += e.target.innerHTML;
}
});
}
// adding click handlers to number buttons
for (var i = 0; i < operator.length; i++) {
operator[i].addEventListener("click", function(e) {
// storing current input string and its last character in variables - used later
var currentString = input.innerHTML;
var lastChar = currentString[currentString.length - 1];
// if last character entered is an operator, replace it with the currently pressed one
if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML;
input.innerHTML = newString;
} else if (currentString.length == 0) {
// if first key pressed is an opearator, don't do anything
console.log("enter a number first");
} else {
// else just add the operator pressed to the input
input.innerHTML += e.target.innerHTML;
}
});
}
// on click of 'equal' button
result.addEventListener("click", function() {
// this is the string that we will be processing eg. -10+26+33-56*34/23
var inputString = input.innerHTML;
// forming an array of numbers. eg for above string it will be: numbers = ["10", "26", "33", "56", "34", "23"]
var numbers = inputString.split(/\+|\-|\×|\÷/g);
// forming an array of operators. for above string it will be: operators = ["+", "+", "-", "*", "/"]
// first we replace all the numbers and dot with empty string and then split
var operators = inputString.replace(/[0-9]|\./g, "").split("");
console.log(inputString);
console.log(operators);
console.log(numbers);
console.log("----------------------------");
// now we are looping through the array and doing one operation at a time.
// first divide, then multiply, then subtraction and then addition
// as we move we are alterning the original numbers and operators array
// the final element remaining in the array will be the output
var divide = operators.indexOf("÷");
while (divide != -1) {
numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]);
operators.splice(divide, 1);
divide = operators.indexOf("÷");
}
var multiply = operators.indexOf("×");
while (multiply != -1) {
numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]);
operators.splice(multiply, 1);
multiply = operators.indexOf("×");
}
var subtract = operators.indexOf("-");
while (subtract != -1) {
numbers.splice(subtract, 2, numbers[subtract] - numbers[subtract + 1]);
operators.splice(subtract, 1);
subtract = operators.indexOf("-");
}
var add = operators.indexOf("+");
while (add != -1) {
// using parseFloat is necessary, otherwise it will result in string concatenation :)
numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1]));
operators.splice(add, 1);
add = operators.indexOf("+");
}
input.innerHTML = numbers[0]; // displaying the output
resultDisplayed = true; // turning flag if result is displayed
});
// clearing the input on press of clear
clear.addEventListener("click", function() {
input.innerHTML = "";
})
</script>
<p><a href="https://codepen.io/lalwanivikas/pen/eZxjqo">
https://codepen.io/lalwanivikas/pen/eZxjqo
</a></p>
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/write
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arc#javascript
<canvas id="circle" width="500" height="500">
<script>
my_canvas = document.getElementById("circle")
my_context = my_canvas.getContext("2d")
my_context.beginPath();
my_context.arc(100, 100, 50, 0, 2*Math.PI);
my_context.stroke();
</script>
请用HTML语言编写一个程序,实现「计算11-5的结果」。
<canvas id="my_shape" width="500" height="500">
<script>
my_canvas = document.getElementById("my_shape")
my_context = my_canvas.getContext("2d")
my_context.strokeStyle = "black"
my_context.strokeRect(25, 25, 100, 100)
</script>
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/strokeRect
<canvas id="my_shape" width="500" height="500">
<script>
my_canvas = document.getElementById("my_shape")
my_context = my_canvas.getContext("2d")
my_context.strokeStyle = "black"
my_context.strokeRect(25, 25, 100, 100)
my_context.lineWidth = 9.5
my_context.strokeRect(25+120, 25, 100, 100)
</script>
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineWidth
<canvas id="my_shape" width="500" height="500">
<script>
my_canvas = document.getElementById("my_shape")
my_context = my_canvas.getContext("2d")
my_context.strokeStyle = "black"
my_context.strokeRect(25, 25, 100, 100)
my_context.lineWidth = 9.5
my_context.strokeRect(25+120, 25, 100, 100)
my_context.strokeStyle = "red"
my_context.strokeRect(25+120+120, 25, 100, 100)
</script>
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/strokeStyle
<canvas id="my_shape" width="500" height="500">
<script>
my_canvas = document.getElementById("my_shape")
my_context = my_canvas.getContext("2d")
my_context.strokeStyle = "black"
my_context.strokeRect(25, 25, 100, 100)
my_context.lineWidth = 9.5
my_context.strokeRect(25+120, 25, 100, 100)
my_context.strokeStyle = "red"
my_context.strokeRect(25+120+120, 25, 100, 100)
my_context.strokeStyle = "#fcb131"
my_context.beginPath()
my_context.arc(25+110, 25+100, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "#00a651"
my_context.beginPath()
my_context.arc(25+120+110, 25+100, 50, 0, 2*Math.PI)
my_context.stroke()
</script>
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arc
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/beginPath
<canvas id="my_shape" width="500" height="500">
<script>
my_canvas = document.getElementById("my_shape")
my_context = my_canvas.getContext("2d")
my_context.strokeStyle = "black"
my_context.strokeRect(25, 25, 100, 100)
my_context.lineWidth = 9.5
my_context.strokeRect(25+120, 25, 100, 100)
my_context.strokeStyle = "red"
my_context.strokeRect(25+120+120, 25, 100, 100)
my_context.strokeStyle = "#fcb131"
my_context.beginPath()
my_context.arc(25+110, 25+100, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "#00a651"
my_context.beginPath()
my_context.arc(25+120+110, 25+100, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "#0081c8"
my_context.beginPath()
my_context.arc(25+50, 25+50, 50, -1/6*Math.PI, 1/4*Math.PI)
my_context.stroke()
my_context.strokeStyle = "red"
my_context.beginPath()
my_context.arc(25+50+120, 25+50, 50, 1/2*Math.PI, 3/4*Math.PI)
my_context.stroke()
</script>
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arc
尝试画一个奥运会五环图案。
MsgBox 1+1
print(1+1)
input()
https://c.runoob.com/compile/9/
#include <stdio.h>
int main()
{
printf("%d", 1+1);
return(0);
}
https://c.runoob.com/compile/11/
通过查找资料,大致了解一下「HTML」和「JavaScript」这两种语言之间的关系。
<script>
document.write(1+1)
</script>
自然语言表达:
1. 准备好画布和画笔。
2. 切换到蓝色画笔,在特定位置,绘制一个圆圈。
3. 切换到黑色画笔,向右移动位置,绘制一个圆圈。
4. 切换到红色画笔,向右移动位置,绘制一个圆圈。
5. 切换到黄色画笔,在蓝圆圈右下方位置,绘制一个圆圈。
6. 切换到绿色画笔,向右移动位置,绘制一个圆圈。
7. 切换到蓝色画笔,在蓝圆圈和黄圆圈交界处画一段圆弧。
8. ……
转写成HTML:
<canvas id="my_shape" width="500" height="500">
<script>
my_canvas = document.getElementById("my_shape")
my_context = my_canvas.getContext("2d")
my_context.lineWidth = 9.5
my_context.strokeStyle = "#0081c8"
my_context.beginPath()
my_context.arc(25+50, 25+50, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "black"
my_context.beginPath()
my_context.arc(25+50+120, 25+50, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "red"
my_context.beginPath()
my_context.arc(25+50+120+120, 25+50, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "#fcb131"
my_context.beginPath()
my_context.arc(25+110, 25+100, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "#00a651"
my_context.beginPath()
my_context.arc(25+120+110, 25+100, 50, 0, 2*Math.PI)
my_context.stroke()
my_context.strokeStyle = "#0081c8"
my_context.beginPath()
my_context.arc(25+50, 25+50, 50, -1/6*Math.PI, 1/4*Math.PI)
my_context.stroke()
my_context.strokeStyle = "black"
my_context.beginPath()
my_context.arc(25+50+120, 25+50, 50, -1/6*Math.PI, 1/4*Math.PI)
my_context.stroke()
my_context.strokeStyle = "black"
my_context.beginPath()
my_context.arc(25+50+120, 25+50, 50, 1/2*Math.PI, 3/4*Math.PI)
my_context.stroke()
my_context.strokeStyle = "red"
my_context.beginPath()
my_context.arc(25+50+120+120, 25+50, 50, 1/2*Math.PI, 3/4*Math.PI)
my_context.stroke()
</script>
通过查找资料,大致了解一下「雅卡尔织布机」(英文:Jacquard machine)。
视频和音乐:
字体: