目录
分支流控制if语句
进入网吧if版
<body>
<script>
var age=+prompt('age=');
if (age >=18){
alert('您的年龄合法，欢迎来网吧享受冲浪的乐趣！');
} else {
alert('您还未成年！')
}
</script>
</body>判断成绩级别
<body>
<script>
var score=+prompt('请输入您的成绩')
if (score>=90){
alert('是A呢宝宝，你是我的骄傲')
}else if (score>=80) {
alert('拿了个B，宝贝，你已经很出色了')
}else if(score>=70) {
alert('等级是C，你要继续加油哦')
}else if(score>=60) {
alert('这个D啊孩子，你很危险呐55')
}else if(score<60){
alert('Emo了，熊孩子，我只想用鞭子和你说话')
}
</script>
</body>判断闰年平年
<body>
<script>
var year=+prompt('请输入您要检测的年份：')
if ( year%4==0&& year%100!=0|| year%400==0) {
alert('这个年份是闰年')
}else{
alert('这个年份是平年')
}
</script>
</body>判断是否中奖
<body>
<script>
var name=prompt('enter your name:')
if (name =="刘德华"){
alert('恭喜您获得了5元！')
} else {
alert('谢谢惠顾您没有中奖')
}
</script>
</body>节点操作
创建添加复制删除节点
<body>
<ul id="one">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul id="two"><li>coffee</li><li>tea</li><li>mike</li></ul>
<ul id="three"></ul>
<button>appendChild()方法添加节点</button>
<button>insertBefore()方法添加节点</button>
<button>移除第三个节点</button>
<button>复制它</button>
<script>
var ul=document.querySelector('ul');
var btn=document.querySelectorAll('button');
btn[0].onclick=function(){
var div=document.createElement ('div'); // 动态创建节点 document.createElement('标签名');
div.innerHTML='通过append Child（）方法新添加的节点';
ul.appendChild(div);
};
btn[1].onclick=function(){
var div=document.createElement ('div');
div.innerHTML='通过insertBefore()方法新添加的节点';
ul.insertBefore(div,ul.children[1]);
};
btn[2].onclick=function(){
ul.removeChild(ul.children[2]); // 移除节点语法格式 node.removeChild(child)
};
btn[3].onclick=function(){
var item=document.getElementById('two').firstChild.nextSibling; //复制
var cloneItem=item.cloneNode(true);
document.getElementById('three').appendChild(cloneItem);
};
</script>
</body>获取节点
<body>
<div>
<h1>
<span class="child">获取父节点</span>
</h1>
<ul> <!-- 定义ul无序列表 -->
<li>获取子节点</li>
<li>我是2号</li>
<li>我是3号</li>
</ul>
</div>
<div class="second">第二个div</div>
<div>获取兄弟节点</div>
<script>
var child=document.querySelector('.child'); // 获取span元素
console.log(child.parentNode); // 通过该对象的parentNode属性获取父节点
var ul=document.querySelector('ul'); // 获取ul元素
console.log(ul.firstChild); // 获取当前节点的首个子节点
console.log(ul.firstElementChild); // 获取当前节点的首个子元素节点
console.log(ul.childNodes); // 获取当前节点的所有子节点的集合
console.log(ul.children); // 获取当前节点的所有子元素节点的集合
var second=document.querySelector('.second');
console.log(second.previousSibling);
console.log(second.nextSibling);
console.log(second.previousElementSibling);
console.log(second.nextElementSibling);
function getNextElementSibing(element){
var el=element;
while (el=el.nextSibling){
if (el.nodeType == Node.ELEMENT_NODE){
return el;
}
}
return null;
}
var div=document.querySelector('div');
console.log(getNextElementSibing(div));
</script>
</body>留言板
<style>
* {
margin: 0;
padding: 0;
}
#mgs {
width: 400px;
color: black;
font-style: italic;
border-width: 5px;
margin: 0 auto;
}
#text {
width: 400px;
height: 150px;
padding: 20px;
font-size: 20px;
}
li {
list-style: none;
border-bottom: 1px solid #999;
line-height: 20px;
margin-top: 30px;
}
span {
float: right;
}
</style>
<body>
<div id="mgs">
<textarea id="text"></textarea><br>
<input type="button" id="btn" value="提交">
<ul class="list"></ul>
</div>
<script>
var btn = document.getElementById('btn');
var list = document.querySelector('.list');
var text = document.getElementById('text');
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容。')
} else {
var li = document.createElement('li');
var time = new Date();
var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>';
text.value = '';
list.insertBefore(li, list.children[0]);
var allB = document.querySelectorAll('button');
for (var i = 0; i < allB.length; i++) {
allB[i].onclick = function () {
list.removeChild(this.parentNode.parentNode);
}
}
}
}
</script>
</body>
三元表达式
数字补0
<body>
<script>
var num=prompt('请输入数字：');
var output= num<10?"0"+num:num;
alert(output);
</script>
</body> 双重for循环
打印倒三角形
<body>
<script>
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = i; j <= 10; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
</script>
</body>打印九九乘法表
<body>
<script>
for (var i = 1;i<=9;i++){
for (var j = 1;j<=i;j++){
document.write(i+'*'+j+'='+(i*j)+'  ');
}
document.write('<br>');
}
</script>
</body>打印正三角形
<body>
<script>
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = 1; j <= i; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
</script>
</body>打印n行n列星星
<body>
<script>
var row = prompt('请输入指定的行数： ')
var column = prompt('请输入指定的列数： ')
var str = '';
for (var i = 1; i <= row; i++) {
for (var j = 1; j <= column; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
</script>
</body>元素样式、属性操作
点我一下
<body>
<button id="btn">点我一下</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
btn.style.fontSize = '30px';
};
</script>
</body>单击按钮改变按钮颜色
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for (var i = 0;i < btns.length;i++){
btns[i].onclick = changeColor;
}
function changeColor(){
for (var j = 0; j < btns.length; j++){
if (btns[j] === this){
this.style.backgroundColor = 'pink';
}else{
btns[j].style.backgroundColor = '';
}
}
}
</script>
</body>全选练习提高
<script type="text/javascript">
window.onload = function(){
var checkedAllBox = document.getElementById("checkedAllBox")
// 1.#checkedAllBtn
// 全选按钮 - 点击按钮以后，四个多选框全都被选中
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn")
checkedAllBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
}
// 2.#checkedNoBtn
// 全不选按钮 - 点击按钮以后，四个多选框全都不被选中
// 为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn")
checkedNoBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
}
// 3.#checkedRevBtn
// 反选按钮 - 点击按钮以后，四个多选框全都变成相反选中状态
// 为id为checkedRevBtn的按钮绑定一个单击响应函数
var checkedRevBtn = document.getElementById("checkedRevBtn")
checkedRevBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = !items[i].checked;
}
// 在反选时也需要判断四个多选框是否全都选中
// 将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for (var j=0; j<items.length; j++){
if (!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
// 4.#sendBtn
// 提交按钮 - 点击按钮以后，所点击的框的内容依次被弹出窗口显示
// 为id为sendBtn的按钮绑定一个单击响应函数
var sendBtn = document.getElementById("sendBtn")
sendBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
if (items[i].checked){
alert(items[i].value)
}
}
}
// 5.#checkedAllBox
// 全选/全不选按钮 - 点击按钮以后，四个多选框全都被选中后者全不被选中
// 为id为checkedAllBox的按钮绑定一个单击响应函数
var checkedAllBox = document.getElementById("checkedAllBox")
checkedAllBox.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = this.checked;
}
}
// 6.#items
// 如果四个多选框全都被选中，则checkedAllBox也应该被选中
// 如果四个多选框没都选中，则checkedAllBox也不应该选中
// 为四个多选框分别绑定单击响应函数
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].onclick = function(){
checkedAllBox.checked = true;
for (var j=0; j<items.length; j++){
if (!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="post">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>通过classlist属性操作样式
<style>
div{
width: 200px;
height: 200px;
background-color: cadetblue;
margin-bottom: 10px;
}
button{
margin-left: 10px;
}
.change-border{
border-radius: 50%;
}
</style>
<body>
<div class="change"></div>
<button class="btn">变成圆形</button>
<button class="btn">变回方形</button>
<script>
var box = document.getElementsByClassName('change');
var btns = document.getElementsByClassName('btn');
btns[0].onclick = function(){
box[0].classList.add('change-border')
};btns[1].onclick = function(){
box[0].classList.remove('change-border')
};
</script>
</body>通过className属性操作样式
<style>
.target{
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 30px;
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class="box">hello!</div>
<script>
var box = document.querySelector(".box");
box.className = 'target';
// 保证元素原始的类名不被覆盖
// box.className = 'box target';
</script>
</body>显示和隐藏密码
<style>
#inputBox {
width: 300px;
height: 50px;
box-shadow: 0 0 5px #2CA1DE;
position: relative;
border-radius: 10px;
}
#inputBox input {
width: 85%;
height: 100%;
padding-left: 10px;
box-sizing: border-box;
border-radius: 10px;
border: none;
outline: none;
}
#inputBox img {
width: 30px;
height: 20px;
position: absolute;
right: 5px;
top: 15px;
}
</style>
</head>
<body>
<div id="inputBox">
<input type="password" />
<img src="img1.jpg" />
</div>
<script>
var input = document.getElementById('inputBox').querySelector('input');
var img = document.getElementById('inputBox').querySelector('img');
var moren = 0; //不可见
img.onclick = function() {
if (moren == 0) {
input.type = 'text';
img.src = 'img2.jpg';
moren = 1;
} else {
input.type = 'password';
img.src = 'img1.jpg';
moren = 0;
}
}
</script>
</body>隔行变色
<body>
<script src="common.js"></script>
<script>
window.onload=function () {
document.getElementById("btn").onclick=function () {
var list=document.getElementById("uu").getElementsByTagName("li");
for (i=0;i<list.length;i++){
//第一种实现方法
/* if (i%2==0){
list[i].style.backgroundColor="red";
} else{
list[i].style.backgroundColor="green";
}*/
//第二种实现方法：三元表达式
list[i].style.backgroundColor=i%2==0?"red":"blue";
}
}
}
</script>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>喜羊羊</li>
<li>美羊羊</li>
<li>懒羊羊</li>
<li>沸羊羊</li>
<li>暖羊羊</li>
<li>慢羊羊</li>
<li>红太狼</li>
<li>灰太狼</li>
</ul>
</body>tab栏切换
<style>
body {
width: 1410px;
margin: 0 auto;
}
.tabBox {
height: 60px;
background: #f59f9f;
}
.tab_list {
list-style: none;
display: flex;
}
.tab_list li {
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
background: #cdee71;
max-width: 220px;
}
.tab_list li:hover {
color: #e41e1e;
background: #f59f9f;
}
.contentBox {
width: 1410px;
height: 500px;
background: #c5d2e4;
display: none;
}
.contentBox P {
margin: 0;
padding: 0;
}
</style>
<body>
<div class="tabBox">
<ul class="tab_list">
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评论(5000+)</li>
<li>手机社区</li>
</ul>
</div>
<div class="allBoxes">
<div class="contentBox">
<p>我是商品介绍</p>
</div>
<div class="contentBox">
<p>规格与包装</p>
</div>
<div class="contentBox">
<p>售后保障</p>
</div>
<div class="contentBox">
<p>商品评论</p>
</div>
<div class="contentBox">
<p>手机社区</p>
</div>
</div>
</body>
2093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
