氵（shui）一下最近忙于实训，学习一些HTML代码，前期学习熟练这些，后期要求运用这些组成界面，这里先发做个部分笔记玩玩

无限移动小方块（初级，没有停止，无限延伸，刷新后试另外的） 越点越快！

第一个的移动方块测试代码

<button onclick=”run()”>移动</button>
<div id=”d1″ style=”width:50px;height:50px;background:red;position:absolute;left:50px;top:800px;”></div>
<script>
function run(){
setInterval(f,50);

}

function f(){

d1.style.left=parseInt(d1.style.left)+ 5 +”px”;
}
</script>

移动

第二个移动停止循环往复方块代码

<button id=”a” onclick=”run1()”>移动</button>
<div id=”d2″ style=”width:50px;height:50px;background:red;position:absolute;left:50px;top:1800px;”></div>
<script>
var timer;
var speed=5;
function run1(){
if(a.innerHTML==”移动”){
timer =setInterval(s,50);
a.innerHTML =”停止”;
}else{
clearInterval(timer);
a.innerHTML =”移动”;
}
}

function s(){
if(parseInt(d2.style.left)>=1000||parseInt(d2.style.left)<=0){
speed = -speed;
}
d2.style.left = parseInt(d2.style.left)+ speed +”px”;
}
</script>

移动

加减乘除

<input id="a1"/> * <input id="b1"/>
<button onclick="jisuan1()"> = </button>
<input id="c1"/>

<hr />

<input id="a2">/<input id="b2">
<button onclick="jisuan2()">=</button>
<input id="c2"/>

<hr />

<input id="a3">+<input id="b3">
<button onclick="jisuan3()">=</button>
<input id="c3"/>

<hr />

<input id="a4">-<input id="b4">
<button onclick="jisuan4()">=</button>
<input id="c4"/>

<script>

function jisuan1(){
c1.value=a1.value * b1.value;
}

function jisuan2(){
c2.value=a2.value / b2.value;
}

function jisuan3(){
c3.value=Number(a3.value)+ Number(b3.value);
}
function jisuan4(){
c4.value=Number(a4.value)- Number(b4.value);
}

</script>

* =

---

/ =

---

+ =

---

- =

太多了，有些需要图片实现，有些依靠提示词（prompt）弹窗实现，没太多时间，注解也没时间写了，就先这样。