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)
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MySQL 基础练习

    最近看了 Sams Teach Yourself 系列的《SQL必知必会》。里面的内容很基础,使用SQL上手简单。我将其中典型的题目及答案总结如下,包含数据库所...

    Yano_nankai
  • Python--基础练习

    1. 在Linux电脑上安装python,ipython,pycharm专业版本软件;

    py3study
  • Java-基础练习

    debug 断点调试的作用: A:查看程序的执行流程 B:调试程序 断点: -- 标记 哪里需要点哪里 需加在有效的地方

    DataScience
  • 基础练习 Huffman树

      Huffman树在编码中有着广泛的应用。在这里,我们只关心Huffman树的构造过程。   给出一列数{pi}={p0, p1, …, pn-1},用这列...

    刘开心_1266679
  • 【Python基础】练习题

    py3study
  • python基础练习_1.1

    py3study
  • MySQL基础练习题

    6) 查询出 goods 表中 price 字段不为 NULL 并且商品编号在 4 到 10 范围内的商品

    阿年、嗯啊
  • Java基础练习之控制台练习

    1.要求使用java编程实现一个命令窗口程序,使得实现以下功能1.1 代码实现1.2 运行结果

    用户7886150
  • python基础1习题练习

    py3study

扫码关注云+社区

领取腾讯云代金券