原生JS实现点击按钮显示更多内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


</head>

<body>

<!-- 设置1个无内容DIV ,超过高度的内容为hidden-->

<div id="test" style="width:100px;height:100px;overflow-y:hidden;">
</div>

</body>

<!-- 设置展开内容和关闭内容的按钮(原理为,点击"展开",则"展开"按钮隐藏,"关闭"按钮显示;点击"关闭",则自己关闭,"展开"按钮展开) -->

<a href="javascript:void(0)" id="show" style="display:block" οnclick="document.getElementById('test').style.height='auto';document.getElementById('hidden').style.display='block';document.getElementById('show').style.display='none';">展开</a>
<a href="javascript:void(0)" id="hidden" style="display:none;" οnclick="document.getElementById('test').style.height='200px';document.getElementById('hidden').style.display='none';document.getElementById('show').style.display='block';">关闭</a>

<script type="text/javascript">

<!-- 设置页面加载时执行 -->

window.οnlοad=function(){
var str = "测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句";
var str1 = str.substring(0,70);
document.getElementById("test").innerText=str1;
}
</script>
</html>
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的原生 JavaScript 轮播图实现,包含左右按钮和小圆点点击功能: HTML 代码: ```html <div class="slider"> <div class="slider-wrapper"> <img src="https://via.placeholder.com/600x400?text=Slide%201" alt="Slide 1"> <img src="https://via.placeholder.com/600x400?text=Slide%202" alt="Slide 2"> <img src="https://via.placeholder.com/600x400?text=Slide%203" alt="Slide 3"> </div> <div class="slider-controls"> <button class="slider-control slider-control-prev"><</button> <button class="slider-control slider-control-next">></button> <div class="slider-dots"> <button class="slider-dot"></button> <button class="slider-dot"></button> <button class="slider-dot"></button> </div> </div> </div> ``` CSS 代码: ```css .slider { position: relative; width: 600px; height: 400px; margin: 0 auto; overflow: hidden; } .slider-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; transition: transform 0.5s ease-in-out; } .slider-wrapper img { width: 100%; height: 100%; object-fit: cover; } .slider-controls { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; } .slider-control { font-size: 2rem; font-weight: bold; color: white; background-color: rgba(0, 0, 0, 0.3); border: none; cursor: pointer; margin: 0 0.5rem; padding: 0.5rem; border-radius: 50%; } .slider-dot { width: 1rem; height: 1rem; background-color: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; margin: 0 0.5rem; padding: 0; border-radius: 50%; } .slider-dot.active { background-color: white; } ``` JavaScript 代码: ```js const slider = document.querySelector('.slider'); const sliderWrapper = document.querySelector('.slider-wrapper'); const slides = Array.from(sliderWrapper.children); const prevButton = document.querySelector('.slider-control-prev'); const nextButton = document.querySelector('.slider-control-next'); const dots = Array.from(document.querySelectorAll('.slider-dot')); let slideWidth = slider.clientWidth; let currentSlide = 0; // Set initial position of slides slides.forEach((slide, index) => { slide.style.left = index * slideWidth + 'px'; }); // Move to the next slide function moveToNextSlide() { if (currentSlide === slides.length - 1) { currentSlide = 0; } else { currentSlide++; } moveSlides(); } // Move to the previous slide function moveToPrevSlide() { if (currentSlide === 0) { currentSlide = slides.length - 1; } else { currentSlide--; } moveSlides(); } // Move to a specific slide function moveToSlide(index) { currentSlide = index; moveSlides(); } // Move the slides to the current slide function moveSlides() { sliderWrapper.style.transform = `translateX(-${currentSlide * slideWidth}px)`; updateDots(); } // Update the active dot function updateDots() { dots.forEach((dot, index) => { if (index === currentSlide) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); } // Handle next button click nextButton.addEventListener('click', moveToNextSlide); // Handle previous button click prevButton.addEventListener('click', moveToPrevSlide); // Handle dot button click dots.forEach((dot, index) => { dot.addEventListener('click', () => { moveToSlide(index); }); }); // Handle window resize window.addEventListener('resize', () => { slideWidth = slider.clientWidth; moveSlides(); }); // Move to the first slide moveToSlide(0); ``` 说明: - 首先获取轮播图容器和相关元素。 - 设置初始位置和宽度。 - 实现移动到下一个、前一个和指定的幻灯片的函数。 - 实现移动幻灯片和更新圆点的函数。 - 添加按钮和圆点的事件监听器。 - 处理窗口大小调整事件。 - 移动到第一张幻灯片。 注意:此代码仅用于教学目的,实际使用可能需要进行更多的优化和改进。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值