JavaScript练习项目

最新推荐文章于 2024-07-26 11:41:15 发布

学不完了是吧

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量206

点赞数 4

分类专栏： js 文章标签： javascript 开发语言 ecmascript html5

本文链接：https://blog.csdn.net/qq_63170044/article/details/139808533

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在学习JS，下面几个项目都是在菜鸟（菜鸟教程 - 学的不仅是技术，更是梦想！）有，前端学习推荐可以使用菜鸟

这个是JS代码

//显示时间
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
};
// x = document.getElementById("demo") // 找到元素
// x.style.color = "#ff0000"; 
//改变内容
var toggle = true;
function myFunction() {
    var x = document.getElementById("demo");
    if (toggle) {
        x.innerHTML = "Hello again!"
        x.style.color = "#ff0000";
    } else {
        x.innerHTML = "Hello js!"
        x.style.color = "#b11111";
    }
    toggle = !toggle;
};

//改变图像
function changeImage() {
    element = document.getElementById('myimage')
    if (element.src.match("bulbon")) {
        element.src = "images/pic_bulboff.gif";
    }
    else {
        element.src = "images/pic_bulbon.gif";
    }
}

新建对应的html页面后嵌入JS即可查看效果

例如

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="app.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <img id="myimage" onclick="changeImage()" src="images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡就可以打开或关闭这盏灯</p>

</body>

</html>

图片资源，在项目文件夹下新建文件夹存放图像即可使用