实例:HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.js脚本三种引入方式</title>
</head>
<body>
<!-- 1.可以直接在元素的事件属性上写js代码 -->
<!-- this.id = 元素上的id属性,也可以去掉this 输入id属性-->
<h1 id="msg" onclick="alert(this.id)">坚持学习js</h1>
<h1 id="msg" onclick="alert(id)">坚持学习js</h1>
<input type="button" name="username" onclick="alert(value)" value="login">
<hr>
<!-- 2.将js脚本写在当前页面中,但只能对当前页面有效 -->
<button onclick="put()">输出li标签</button>
<ul></ul>
<script>
function put(){
var ul = document.getElementsByTagName('ul')[0];
for(var i=0;i<10;i++){
var li = document.createElement('li');
li.innerHTML = i;
ul.appendChild(li);
}
}
</script>
<hr>
<!-- 3.将js脚本写到外部test.js中,然后用script src属性引入,这种方式可以多个页面使用-->
<script src="task01.js"></script>
<style>
#ball{
width: 60px;height: 60px;
background: lightblue;
box-shadow: 2px 2px 10px lightsalmon;
border-radius: 50%;
position: relative;
}
</style>
<div id="ball" onclick="running(this)"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例:js代码
function running(ele){
var count = 0;
var timer = setInterval(function(){
if(count < 100){
ele.style.left = ele.style.top = count + 'px';
ele.style.borderRadius = '0px';
ele.style.backgroundColor = 'red';
count++;
console.log(ele);
}else{
clearInterval(timer);
ele.style.borderRadius = '50%';
ele.style.backgroundColor = 'lightblue';
}
},10);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
