js基础练习

js基础练习

目录

• 求3个数中的最大值和最小值
• 判断一个数是否是偶数
• 点击li元素时展示该元素内容
• 点击按钮实现在ul开头结尾添加li
• 鼠标放置li元素上, 显示对应图片
  
  
  

求3个数中的最大值和最小值

代码

function getMax(a, b, c) {
    var max = a
    if(b > max)
        max = b
    if(c > max)
        max = c
    return max
}

function getMin(a, b, c) {
    var min = a
    if(b < min)
        min = b
    if(c < min)
        min = c
    return min
}

console.log(getMax(1, 22, 3))
console.log(getMin(15, 2, 33))

输出结果

22
2

判断一个数是否是偶数

代码

function getEven(a) {
    if (a % 2) {
        console.log("i am not even number")
    }
    else {
        console.log("i am even number")
    }
}

getEven(22)
getEven(33)

输出结果

i am even number
i am not even number

点击li元素时展示该元素内容

代码

<ul class="ct">
  <li>这里是</li>
  <li>星辉</li>
  <li>幸会</li>
</ul>

var arr_li = document.getElementsByTagName('li');
for (var i = 0; i < arr_li.length; i++) {
    arr_li[i].addEventListener('click', function(event) {
    console.log(event.target.innerText);
}, false);
}

依次点击后输出结果

这里是
星辉
幸会

点击按钮实现在ul开头结尾添加li

代码

<ul class="ct">
    <li>这里是</li>
    <li>星辉</li>
    <li>幸会</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容">
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>


var arr_li = document.getElementsByTagName('li')
var ele_content = document.getElementsByClassName('ipt-add-content')
var content
var btn_start = document.getElementById('btn-add-start')
var btn_end = document.getElementById('btn-add-end')
for (var i = 0; i < arr_li.length; i++) {
    arr_li[i].addEventListener('click', function(event) {
    console.log(event.target.innerText);
}, false);
}
btn_start.addEventListener('click', function(event) {
    // 用原生js在开头加li元素
    content = ele_content[0].value
    var node=document.createElement("li");
    var textnode=document.createTextNode(content);
    node.appendChild(textnode);
    document.getElementsByClassName("ct")[0].insertBefore(node, document.getElementsByClassName("ct")[0].firstChild);
    ele_content[0].value = ''
}, false)
btn_end.addEventListener('click', function(event) {
    // 用原生js在结尾加li元素
    content = ele_content[0].value
    var node=document.createElement("li");
    var textnode=document.createTextNode(content);
    node.appendChild(textnode);
    document.getElementsByClassName("ct")[0].appendChild(node);
    ele_content[0].value = ''
}, false)

鼠标放置li元素上, 显示对应图片

代码

<ul class="ct">
    <li data-img="1.jpg">鼠标放置查看图片1</li>
    <li data-img="2.jpg">鼠标放置查看图片2</li>
    <li data-img="3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>

// 需要在对应路径放置三张图片
var ele_li = document.getElementsByTagName('li')
var img = document.getElementsByClassName('img-preview')
for (var i = 0; i < ele_li.length; i++) {
    ele_li[i].addEventListener('mouseover', function(event) {
        var src = event.target.getAttribute('data-img')
        img[0].innerHTML = '<img src="' + src + '">'
    }, false)
}