DOM操作和样式控制

最新推荐文章于 2024-01-19 08:44:45 发布
最新推荐文章于 2024-01-19 08:44:45 发布
阅读量141 收藏
点赞数 1
文章标签： javascript html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48792508/article/details/114997312
版权

JS小练习
实现一个简单的页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击开始答题按钮，进入答题页面，倒计时30s，答对积分，答错不扣分，时间结束后回到初始状态，点击答题记录按钮，出现上一次的答题记录，若答题记录较多，会出现滚动条

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>WebWork7</title>
    <style type="text/css">
        .div_one{
            margin: 0 auto;
            overflow:hidden;
            width: 600px;
            height: 600px;
            background-color: rgb(221, 221, 221);
            border:3px solid #000;
        }
        .div_two{
            margin: 0 auto;
            width: 600px;
            height: 600px;
            background-color: white;
            display: none;
            border:3px solid #000;
        }
        #result{
            width: 260px;
            height: 400px;
            display: none;
            background-color:rgb(221, 221, 221);
            border-style: none;
        }
        #div1_1{
            text-align: center;
            margin-top: 100px;
        }
        #div1_2{
            text-align: center;
            margin-top: 10px;
            overflow:hidden;
        }
        #div2_1{
            padding-top: 30px;
            padding-left: 50px;
        }
        #div2_2{
            padding-top: 40px;
            padding-left: 50px;
        }
        #div2_3{
            padding-top: 40px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div id="div1" class="div_one">
    	<div id="div1_1">
        	<button id="btn_start" onclick="start()">开始答题</button>
        	<button id="btn_recod" onclick="record()">答题记录</button>
      	</div>
      	<div id="div1_2">
        	<textarea id="result"></textarea>
      	</div>
    </div>

    <div id="div2" class="div_two">
      	<div id="div2_1">
        	<a>倒计时:</a>
        	<a id="a_time">30</a>
            <a>S</a>
        	<a style="padding-left: 250px;">得分:</a>
        	<a id="a_score">0</a>
      	</div>

      	<div id="div2_2">
        	<a id="a_adden1">12</a>
        	<a>+</a>
        	<a id="a_adden2">12</a>
        	<a>=</a>
        	<input id="input_answer"/>
      	</div>
      	<div id="div2_3">
        	<button  onclick="sub_answer()">提交答案</button>
      	</div>
    </div>

    <script>
        var answer = ['arr'];
        div1 = document.getElementById("div1");
        div2 = document.getElementById("div2");

        btn_start = document.getElementById("btn_start");
        btn_recod = document.getElementById("btn_recod");

        a_time = document.getElementById("a_time");
        a_score = document.getElementById("a_score");
        a_adden1 = document.getElementById("a_adden1");
        a_adden2 = document.getElementById("a_adden2");
        result = document.getElementById("result");

        input_answer = document.getElementById("input_answer")

        var add1 = Math.round(Math.random()*100);
        var add2 = Math.round(Math.random()*100);
        if(add1<10){
            add1+=10;
        }
        if(add2<10){
            add2+=10;
        }

        var maxtime = 29 ; 
        var score = 0;

        function CountDown(){
            if (maxtime >= 0){
                seconds = Math.floor(maxtime % 60);
                a_time.innerHTML = seconds;
                --maxtime;
            }else{
                div1.style.display="block";
                div2.style.display="none";
                clearInterval(timer);
                
            }
        }

        function sub_answer(){
            var_input_answer = input_answer.value;
            console.log(var_input_answer)
            console.log(a_adden1.innerHTML)
            answer.push(a_adden1.innerHTML)
            answer.push(a_adden2.innerHTML)
            answer.push(var_input_answer)
            if(parseInt(var_input_answer)==parseInt(a_adden1.innerHTML)+parseInt(a_adden2.innerHTML)){
                score += 10;
                a_score.innerHTML = score;
                answer.push("对")
            }else{
                answer.push("错")
            }
            console.log(answer)

            input_answer.value = null;

            var add1 = Math.round(Math.random()*100);
            var add2 = Math.round(Math.random()*100);
            if(add1<10){
                add1+=10;
            }
            if(add2<10){
                add2+=10;
            }
            a_adden1.innerHTML = add1;
            a_adden2.innerHTML = add2;
        }

        function start(){ 
            score = 0;
            maxtime =29;
            a_score.innerHTML = score;
            a_time.innerHTML = "30";
            answer = ['arr'];
            result.style.display = "none";
            div1.style.display="none";
            div2.style.display="block";
            
            timer = setInterval("CountDown()", 1000);
            a_adden1.innerHTML = add1;
            a_adden2.innerHTML = add2;
        }

        function record(){
            result.style.display = "inline-block";
            if(answer.length>2 && result.innerHTML==""){
                for(var i=0;i<answer.length/4-1;i++){
                    if(answer[i*4+3]==""){
                       result.innerHTML += answer[i*4+1] + "+" + answer[i*4+2]+"="+answer[i*4+3]+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+"结果："+answer[i*4+4];
                    }else{
                        if(parseInt(answer[i*4+3])>100){
                            result.innerHTML += answer[i*4+1] + "+" + answer[i*4+2]+"="+answer[i*4+3]+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ensp;&nbsp;"+"结果："+answer[i*4+4];
                        }else{
                            result.innerHTML += answer[i*4+1] + "+" + answer[i*4+2]+"="+answer[i*4+3]+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+"结果："+answer[i*4+4];
                        }    
                    }
                }
            }
        }
    </script>
</body>
</html>
Superx@tester
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript HTML DOM ：控制元素的样式
七七的博客
04-21 421
控制元素样式 1.使用元素的style属性来设置样式 <body> <div id="div1"> div </div> <script> var div1 = document.getElementById("div1"); div1.onclick = function...
DOM样式操作
weixin_42533732的博客
07-29 358
DOM样式操作 DOM样式 dom给我们提供了专门操作样式的API，css的样式非常的多，dom提供了一个统一的对象来操作样式。style这个对象在DOM里面就是用来包含样式的。 const odiv = document.getElementById("div") //js获取到元素的样式 odiv.style 页面上每个标签都可以直接使用style这个属性来获取当前元素的样式。这个样式除了自己设置的内容外，还包含了浏览器的一些样式、我们也可以使用style来设置样式。 单个单词可以直接用 样式名字有
【学习前端第三十四课】 DOM操作样式
最新发布
weixin_65729202的博客
01-19 949
1、如果过要对某一个元素设置css样式，我们可以使用style属性去设置2、如果要获取一个元素的css样式信息，我们可以使用方法，这个方法可以获取当前元素计算之后的所有的样式信息，但是不能赋值3、如果我们要修改内部样式或外部样式表的样式，或新增，或删除，则需要使用到操作内部样式的style标签或外部样式link标签4、如果我们要对某一个元素添加或删除一个class，我们使用classList属性那些看似波澜不惊的日复一日，总有一天会看到坚持的意义，希望这篇博客能帮到你吖ଘ(੭ˊ꒳ˋ)੭✧。
JS控制DOM的CSS样式
LittleUniverse
03-31 850
JS控制DOM的样式 方法一： 通过DOM的class属性 <style type="text/css"> .offButton { width: 200px } .onButton { width: 200px; height: 200px } </style> <button class="offButton" name="saveButt
DOM编程之：节点操作和样式
LYQ2332826438的博客
08-12 540
DOM编程之：节点操作和样式 一、换图片 var im=document.getElementById("idd"); im.setAttribute("src","a2.jpg"); //src为&lt;img&gt;的属性，a2.jpg是要替换的新值。 im.src="a2.jpg"; 几张图片循环播放： int i=1; //全局变量 function mya(){    ...
JavaScript DOM操作表格及样式
10-24
总结来说，JavaScript DOM操作表格及样式的知识点涵盖了如何通过JavaScript创建和修改HTML表格，如何利用HTML DOM对象和其属性方法更高效地操作表格，以及如何通过CSS及DOM级别来控制和改变样式。这些知识点对于进行...
DOM基础教程之使用DOM控制表单
09-03
DOM（Document Object Model）是网页内容的结构化表示，它允许开发者...熟练掌握DOM操作表单的方法，可以提升网页应用的功能性和用户体验。通过理解和实践这些技术，开发者可以创建更加动态和响应式的网页应用程序。
JavaScript DOM常用操作代码汇总
10-15
JavaScript DOM（文档对象模型）是Web开发中一个关键的...理解和熟练掌握DOM操作是成为一名合格的前端开发者所必需的技能之一。通过实践和不断学习，你可以更有效地利用DOM来构建交互性更强、用户体验更佳的Web应用。
jQuery DOM操作 基于命令改变页面
10-29
DOM 操作是 JavaScript 中一项基本而重要的技能，通过它可以实现对网页内容、结构和样式的动态控制。 首先，我们来讨论操作属性。在使用 jQuery 时，常见的操作属性方法包括 `.addClass()` 和 `.removeClass()`，这...
DOM操作一些常用的属性汇总
12-09
【DOM操作常用属性详解】 DOM（Document Object Model）是HTML和XML文档的一种标准表示形式，它将文档解析成一个可编程的节点树，允许开发者通过JavaScript等脚本语言对文档内容进行读取、修改和操控。DOM的核心...
DOM操作练习
阿甘正传
09-12 1670
DOM操作练习 举例1：点击按钮时，显示和隐藏盒子。 代码实现： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> button { ...
Dom 简单控制
02-27 4832
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。  通过 DOM，可访问 HTML 文档中的每个节点 1、 getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。 这两种方法会忽略文档的结构。假如您希望查找文档中所有的 元素，getElementsB
DOM的基本操作(一)
dwjdj的博客
02-08 2903
事件的过程 /* *点击操作---->事件，有触发，有响应，有事件源 *按钮经过点击，弹出对话框 *按钮---->事件源 *点击---->事件名字 *经过点击---->触发 *弹出对话框---->响应 * */ 基本操作的书写方法 方法一 <!--第一个版本--> <!--HTML代码，点击按钮弹出对话框,对话框:alert()====>js的...
2020-04-26
ojzct的博客
04-26 245
千里之行，始于足下！
【DOM BOM】笔记 3日 节点操作
林见鹿鸣
12-23 2199
节点操作 获取元素通常使用两种方式：利用DOM提供的方法获取元素 和 利用节点层级关系获取元素。 利用DOM提供的方法获取元素 该方法逻辑性不强、繁琐。 利用节点层级关系获取元素 利用父子兄节点关系获取元素。 逻辑性强，但是兼容性稍差。 节点概述 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用 node 来表示。 HTML DOM树中的所有节点均可通过 JavaScript 进行访问，所有 HTML元素（节点）均可被修改，也可以创建或删除。 一般地，节点至少拥有
使用DOM操作样式
qq_51088023的博客
07-19 459
语法元素.style.样式名=样式值。
cmd命令
xtulollipop
08-05 586
cmd命令大全（第一部分） 　　winver———检查Windows版本 　　wmimgmt.msc—-打开windows管理体系结构(WMI) 　　wupdmgr——–windows更新程序 　　wscript——–windows脚本宿主设置 　　write———-写字板 　　winmsd———系统信息 　　wiaacmgr——-扫描仪和照相机向导 　　winchat
JS中的DOM样式操作
张子又
01-18 2495
DOM样式操作 1.CSS样式操作 我们可以通过 元素节点.style.样式 来设置行内style样式 1.1 获取行内样式 注意: 只能获取行内样式，样式名采用的是驼峰命名法则。 window.onload = function () { var box = document.getElementById("box"); console.log(box.style.backgro...
DOM操作样式
晚风
07-06 757
DOM对CSS的操作 读取内联样式： 语法：元素.style.样式名 元素.style.width 元素.style.height 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法,将-去掉，然后-后的字母改大写 background-color --> backgroundColor border-width ---> borderWidth 通过sty...
DOM操作表格与样式详解：实例与陷阱
操作样式方面，DOM允许直接访问和修改元素的CSS属性。例如，`table.border=1`设置了边框宽度，而`table.width=300`设置了表格的宽度。通过`innerHTML`或`textContent`属性，可以动态插入或更新单元格文本内容，如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值