0 0 0 9 - 初识JavaScript（Js）,Web密训营,Web开发,鱼C论坛

不二如是 发表于 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>
<aid="second_JS">传送门</a>
</div>
<div id="Prada">
<h1>脚踩Prada的女魔头</h1>
<p>Prada女王Prada女王</p>
<aid="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>
<aid="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">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<aid="first_Js">传送门
</a>
</div>

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

页: 1 2 [3]

鱼C论坛's Archiver