鱼C论坛

 找回密码
 立即注册
123
返回列表 发新帖
楼主: 不二如是

[庖丁解牛] 0 0 0 9 - 初识JavaScript(Js)

[复制链接]
 楼主| 发表于 2018-2-5 07:59:56 | 显示全部楼层
ttyhtg 发表于 2018-2-4 23:58
二,innerHTML属性来修改,单击“传送门”后字体变为“穿越成功”
楼主大人,上面那个代码应该放到哪个位 ...


放在和“.html”平级的".js"文件中,然后调用~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-5 09:18:31 | 显示全部楼层
不二如是 发表于 2018-2-5 07:59
放在和“.html”平级的".js"文件中,然后调用~

我放了,我以为跟css一样可以放入html里面实现同样的效果,试了好几个地方都不行
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-2-5 09:28:42 | 显示全部楼层
ttyhtg 发表于 2018-2-5 09:18
我放了,我以为跟css一样可以放入html里面实现同样的效果,试了好几个地方都不行


引用加了嘛?
1.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-5 15:05:29 | 显示全部楼层

加了,我是说不使用js独立文件实现成功穿越的效果,哈哈,就像之前的css没有独立出来一样
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-3-8 17:31:34 | 显示全部楼层
作业提交,另外有个问题,点击从“传送门”换为“继续加油”,再点击没有反应了,有什么办法,可以再点击也可以打开网页呢
360截图20180308173126412.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-26 12:26:58 | 显示全部楼层
Js部分
  1. var first_Js = document.getElementById("first_Js");
  2. first_Js.onclick = function(e)
  3. {
  4.         e.preventDefault();
  5.         first_Js.innerHTML = "穿越成功";
  6. }
复制代码


009.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-29 14:37:05 | 显示全部楼层
土耳其东木白 发表于 2018-5-29 14:35
欢迎来到HTML世界
       

代码如下,为什么米有阻止跳转,也没有弹窗提示?求解答
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-13 11:24:47 | 显示全部楼层
交作业 GIF.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-15 09:49:10 | 显示全部楼层
无标题.png
html:
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到HTML世界</title>
  6.                 <link href="index.css" rel="stylesheet">
  7.         </head>
  8.         <body>
  9.                 <div id="container">
  10.                         <h1>我爱鱼C</h1>
  11.                         <p>www.fishc.com-让编程改变世界</p>
  12.                         <a  id="first_Js">咻!</a>
  13.                 </div>
  14.                 <script src="index.js"></script>
  15.         </body>
  16. </html>
复制代码

js:
  1. first_Js.onclick = function(e)
  2. {
  3.         e.preventDefault();
  4.         first_Js.innerHTML = "穿越成功";
  5. }
复制代码

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;
}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-14 13:32:13 | 显示全部楼层
交作业
2.png
1.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-11 23:46:55 | 显示全部楼层

HTML
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <title>
  5.         XXX
  6.     </title>
  7.     <meta charset="utf-8">
  8.     <link href="008.css" rel="stylesheet">
  9. </head>

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

  19. </html>
复制代码


JS

  1. var first_Js = document.getElementById("first_js");
  2. first_Js.onclick = function(e) {
  3.     e.preventDefault();
  4.     first_Js.innerHTML = '穿越成功';
  5. }
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-13 16:46:12 | 显示全部楼层
为啥我导入不了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-13 16:46:43 | 显示全部楼层

<!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>
               
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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;
                                        }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-20 16:01:02 | 显示全部楼层

  1. preventDefault控制不跳转页面
  2. innerHTML设置控件内容
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-27 17:51:33 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <link href="0001.css" rel="stylesheet"><!--获取的文件是style样式表-->
  7. </head>
  8. <body>
  9.         <div id="container"><!--div封装,id区块说明-->
  10.         <h1>我爱鱼C</h1>
  11.                 <p>WWW.FishC.com - 让编程改变世界</p>
  12.                 <a  id="first_Js">传送门
  13.                 </a>
  14.         </div>
  15.         <!--<script type="text/javascript"> 直接写在body
  16.                 var first_Js = document.getElementById('first_Js');
  17.                 /*alert(first_Js);测试*/
  18.                 first_Js.onclick = function(e)
  19.                         {
  20.                                 e.preventDefault();
  21.                                 first_Js.innerHTML = "穿越成功";
  22.                         }
  23.         </script>
  24.         -->
  25.         <script src ="0001js.js"></script>>
  26. </body>
  27. </html>
复制代码
  1. /*<style type="text/css">指定CSS的样式定义*/
  2. /*css文件*/
  3. @charset"UTF-8";
  4.                 body{
  5.                         background: url(1.png)center center;/*图片加center center,就能保持一直显示中间位置,如果不加,当页面缩小到小于图片尺寸时,只能出现图片顶部、左侧的内容*/
  6.                         background-size: cover;/*不会产生平铺的效果,只会一张图放大缩小*/
  7.                         margin: 0;
  8.                         padding: 0;/*潜规则,提高自主控制*/
  9.                         position: relative;/*若设置containertop属性,container必须绝对定位,body相对定位*/

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

  17.                 }
  18.                 #container{/*定义ID选择器必须添加#号*/
  19.                         width: 100%;
  20.                         text-align: center;/*文字居中*/
  21.                         position: absolute;/*绝对定位*/
  22.                         top: 50%;
  23.                         transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
  24.                 }
  25.                 h1{
  26.                         font-size: 55px;
  27.                         margin-bottom: 22px;/*控制行间距,h1标题与下面p之间的距离*/
  28.                 }
  29.                 p{
  30.                         font-size: 22px;
  31.                         margin-bottom:22px;
  32.                 }
  33.                 a{
  34.                         font-size:33px;
  35.                         background: #66B0A7;
  36.                         color:#fff;
  37.                         /*border: 5px double #ffffff;/*宽度。样式。颜色*/
  38.                         border-radius: 10px;
  39.                         padding: 10px 66px;/*上下两侧10px,左右两侧66px*/
  40.                         text-decoration: none;/*定义无边框*/
  41.                 }
  42.         /*</style>*/
复制代码
  1. var first_Js = document.getElementById('first_Js');
  2.                 /*alert(first_Js);测试*/
  3.                 first_Js.onclick = function(e)
  4.                         {
  5.                                 e.preventDefault();
  6.                                 first_Js.innerHTML = "穿越成功";
  7.                         }
复制代码


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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 = "穿越成功";
}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-16 09:42:24 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>TEST! TEST!!</title>
  6.         <link rel="stylesheet" href="css/test.css">
  7.     </head>

  8.     <body>
  9.         <div id="container">
  10.             <h1>我爱鱼C</h1>
  11.             <p>让编程改变世界!</p>
  12.             <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
  13.         </div>
  14.         <script type="text/javascript">
  15.             var first_Js = document.getElementById("first_Js");
  16.             first_Js.onclick = function(e)
  17.             {
  18.                 e.preventDefault();
  19.                 first_Js.innerHTML = "穿越成功";
  20.             }
  21.         </script>
  22.     </body>
  23. </html>
复制代码
Snipaste_2020-08-15_13-44-34.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 23:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表