0 0 0 9 - 初识JavaScript（Js）

不二如是 · 发表于 2018-2-5 07:59:56

ttyhtg 发表于 2018-2-4 23:58
二，innerHTML属性来修改，单击“传送门”后字体变为“穿越成功”
楼主大人，上面那个代码应该放到哪个位 ...

放在和“.html”平级的".js"文件中，然后调用～

ttyhtg · 发表于 2018-2-5 09:18:31

不二如是发表于 2018-2-5 07:59
放在和“.html”平级的".js"文件中，然后调用～

我放了，我以为跟css一样可以放入html里面实现同样的效果，试了好几个地方都不行

不二如是 · 发表于 2018-2-5 09:28:42

ttyhtg 发表于 2018-2-5 09:18
我放了，我以为跟css一样可以放入html里面实现同样的效果，试了好几个地方都不行

引用加了嘛？

ttyhtg · 发表于 2018-2-5 15:05:29

不二如是发表于 2018-2-5 09:28
引用加了嘛？

加了，我是说不使用js独立文件实现成功穿越的效果，哈哈，就像之前的css没有独立出来一样

likesunshine · 发表于 2018-3-8 17:31:34

作业提交，另外有个问题，点击从“传送门”换为“继续加油”，再点击没有反应了，有什么办法，可以再点击也可以打开网页呢

rock5442107 · 发表于 2018-5-26 12:26:58

Js部分

var first_Js = document.getElementById("first_Js");
first_Js.onclick = function(e)
{
        e.preventDefault();
        first_Js.innerHTML = "穿越成功";
}

土耳其东木白 · 发表于 2018-5-29 14:35:54

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="0008CSS.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>I love 鱼C</h1>
<p>www.fishc.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html" id="first_JS">传送门</a>
</div>
<style type="text/javascript">
var first_JS = document.getElementById("first_JS");
alert(first_JS);
first_JS.onclick = function(e)
{
e.preventDefault();
first_JS.innerHTML = "穿越成功";
}
</style>
<div id="Gucci">
<h1>I love Gucci</h1>
<p>Gucci Gucci Prada Prada</p>
<a id="second_JS">传送门</a>
</div>
<div id="Prada">
<h1>脚踩Prada的女魔头</h1>
<p>Prada女王Prada女王</p>
<a id="third_JS">传送门</a>
</div>

</body>
</html>

土耳其东木白 · 发表于 2018-5-29 14:37:05

土耳其东木白发表于 2018-5-29 14:35
欢迎来到HTML世界

代码如下，为什么米有阻止跳转，也没有弹窗提示？求解答

STmove · 发表于 2018-7-13 11:24:47

交作业

我爱鱼C！ · 发表于 2018-7-15 09:49:10

html:

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到HTML世界</title>
                <link href="index.css" rel="stylesheet">
        </head>
        <body>
                <div id="container">
                        <h1>我爱鱼Ｃ</h1>
                        <p>www.fishc.com-让编程改变世界</p>
                        <a  id="first_Js">咻!</a>
                </div>
                <script src="index.js"></script>
        </body>
</html>

js:

first_Js.onclick = function(e)
{
        e.preventDefault();
        first_Js.innerHTML = "穿越成功";
}

css:
@charset "UTF-8";
html,body {
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body {
background: url("https://picsum.photos/1600/1200/?random") center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
#container {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1 {
font-size: 66px;
margin-bottom: 22px;
}
p {
font-size: 33px;
margin-bottom: 22px;
}
a {
font-size: 55px;

}
a {
background: #33ffff;
color: #fff;
border: 1px solid #33ffff;
border-radius: 10px;
padding: 10px 66px;
text-decoration: none;
}

aiqinghuilaidao · 发表于 2018-9-14 13:32:13

交作业

soulwyb · 发表于 2018-10-11 23:46:55

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        XXX
    </title>
    <meta charset="utf-8">
    <link href="008.css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <h1>我爱鱼C</h1>
        <p>www.FishC.com - 让编程改变世界</p>
        <a href="http://bbs.fishc.com/forum-337-1.html" id="first_js">传送门</a>
    </div>
    <script src="first_Js.js">
    </script>
</body>

</html>

JS

var first_Js = document.getElementById("first_js");
first_Js.onclick = function(e) {
    e.preventDefault();
    first_Js.innerHTML = '穿越成功';
}

jiamin_2010 · 发表于 2018-11-13 16:46:12

为啥我导入不了

jiamin_2010 · 发表于 2018-11-13 16:46:43

jiamin_2010 发表于 2018-11-13 16:46
为啥我导入不了

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first HTML</title>
<link href = "001.css" rel = "stylesheet">
<head>
<body>
<div id="container">
<h1>我爱编程</h1>
<p>www.fish.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
</div>
<script src="first_Js.js"></script>
</body>
</html>

jiamin_2010 · 发表于 2018-11-13 17:15:37

jiamin_2010 发表于 2018-11-13 16:46
My first HTML

css
*用来制定样式文件的编码格式*/
@charset "UTF-8";
html,body{
height: 100%;
color:#FF0088;
font-family:sans-serif;
}

body{
background: url(./css/1.jpg) center center;
background-size: cover;
margin:0;
padding:0;
position:relative;
}
#container{
width:100%;
text-align: center;
position:absolute;
top:100%;
transform:translateY(-50%);
}
h1{
font-size:66px;
margin-bottom:22px;
}
p{
font-size:33px;
margin-bottom:22px;
}
a{
font-size:55px;
background:#33FF33;
color:#444444;
border:1px solid #33FFFF;
border-radius:5px;
padding:10px33px;
text-decoration:none;
}

星海雪的钟爱 · 发表于 2019-2-20 16:01:02

preventDefault控制不跳转页面
innerHTML设置控件内容

phszhuli · 发表于 2019-3-27 17:51:33

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"> 
        <title>欢迎来到HTML世界</title>
        <link href="0001.css" rel="stylesheet"><!--获取的文件是style样式表-->
</head>
<body>
        <div id="container"><!--div封装，id区块说明-->
        <h1>我爱鱼C</h1> 
                <p>WWW.FishC.com - 让编程改变世界</p>
                <a  id="first_Js">传送门
                </a>
        </div>
        <!--<script type="text/javascript"> 直接写在body
                var first_Js = document.getElementById('first_Js');
                /*alert(first_Js);测试*/
                first_Js.onclick = function(e)
                        {
                                e.preventDefault();
                                first_Js.innerHTML = "穿越成功";
                        }
        </script>
        -->
        <script src ="0001js.js"></script>>
</body>
</html>

/*<style type="text/css">指定CSS的样式定义*/
/*css文件*/
@charset"UTF-8";
                body{
                        background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
                        background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
                        margin: 0;
                        padding: 0;/*潜规则，提高自主控制*/
                        position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

                }
                
                html,body{/*为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。*/
                        height: 100%; /* height如果不设置100%，就会出现重复
                */
                        color: #ffffff;
                        font-family:sans-serif;

                }
                #container{/*定义ID选择器必须添加#号*/
                        width: 100%;
                        text-align: center;/*文字居中*/
                        position: absolute;/*绝对定位*/
                        top: 50%;
                        transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
                }
                h1{
                        font-size: 55px;
                        margin-bottom: 22px;/*控制行间距，h1标题与下面p之间的距离*/
                }
                p{
                        font-size: 22px;
                        margin-bottom:22px;
                }
                a{
                        font-size:33px;
                        background: #66B0A7;
                        color:#fff;
                        /*border: 5px double #ffffff;/*宽度。样式。颜色*/
                        border-radius: 10px;
                        padding: 10px 66px;/*上下两侧10px，左右两侧66px*/
                        text-decoration: none;/*定义无边框*/
                }
        /*</style>*/

var first_Js = document.getElementById('first_Js');
                /*alert(first_Js);测试*/
                first_Js.onclick = function(e)
                        {
                                e.preventDefault();
                                first_Js.innerHTML = "穿越成功";
                        }

你在意在便在 · 发表于 2019-10-26 09:52:55

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
      <div id="container">
<h1>我爱鱼C</h1>
<p>WWW.fishC.com  --  让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html" target="_blank" id="first_Js">传送门</a>
</div>
<script src="first_Js.js"></script>
</body>
</html>

--------------------------css-------------------------------
@charset "utf-8";

html,body {
color: pink;
height: 100%;
font-family: sans-serif;
}

body {
background-size: cover;
background: url(image/003.jpg) center center;
margin: 0;
padding: 0;
position: relative;
}

#container {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
/* container 这个div移到页面50% 下方，
想要真正实现内容也居中，则需要Y轴偏移-50%即可； */
transform: translateY(-50%);
/* border: 1px solid red; */
}

h1 {
font-size: 66px;
margin-bottom: 22px;
}

p {
font-size: 33px;
margin-bottom: 22px;
}

a {
border:1px solid gray;
border-radius: 10px;  /* 四边圆角 */
/* background:#33ffff;  */
color:white;
font-size: 55px;
margin:10px 33px;
text-decoration:none;
}
---------------------Js---------------------------
let first_Js = document.getElementById("first_Js");

first_Js.onclick = function(){
first_Js.innerHTML = "穿越成功";
}

huanghuiyv · 发表于 2020-8-16 09:42:24

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TEST! TEST!!</title>
        <link rel="stylesheet" href="css/test.css">
    </head>

    <body>
        <div id="container">
            <h1>我爱鱼C</h1>
            <p>让编程改变世界!</p>
            <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
        </div>
        <script type="text/javascript">
            var first_Js = document.getElementById("first_Js");
            first_Js.onclick = function(e)
            {
                e.preventDefault();
                first_Js.innerHTML = "穿越成功";
            }
        </script>
    </body>
</html>

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 9 - 初识JavaScript（Js）