前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js基础练习

js基础练习

作者头像
星辉
发布2019-01-15 10:37:41
1.1K0
发布2019-01-15 10:37:41
举报
文章被收录于专栏:用户2119464的专栏

js基础练习

目录

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

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

代码
代码语言:javascript
复制
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))
输出结果
代码语言:javascript
复制
22
2

判断一个数是否是偶数

代码
代码语言:javascript
复制
function getEven(a) {
    if (a % 2) {
        console.log("i am not even number")
    }
    else {
        console.log("i am even number")
    }
}

getEven(22)
getEven(33)
输出结果
代码语言:javascript
复制
i am even number
i am not even number

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

代码
代码语言:javascript
复制
<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);
}
依次点击后输出结果
代码语言:javascript
复制
这里是
星辉
幸会

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

代码
代码语言:javascript
复制
<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元素上, 显示对应图片

代码
代码语言:javascript
复制
<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)
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年09月09日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • js基础练习
    • 目录
      • 求3个数中的最大值和最小值
        • 判断一个数是否是偶数
          • 点击li元素时展示该元素内容
            • 点击按钮实现在ul开头结尾添加li
              • 鼠标放置li元素上, 显示对应图片
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档