Introduction to how JavaScript implements automatic scrolling of Select list content-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Introduction to how JavaScript implements automatic scrolling of Select list content

巴扎黑

Sep 08, 2017 am 11:26 AM

javascriptjsselect

本文实例讲述了js实现Select列表内容自动滚动效果。分享给大家供大家参考。具体如下：

这里演示的Select列表内容自动滚动效果，文字可自动滚屏，当网页加载完毕后，Select中的内容会一个接一个向上滚动，当然，滚动的参数和速度是可以调节的。或许你会用得上。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-select-font-scroll-codes/

具体代码如下：

<html>
<head>
<title>文字自动滚屏</title>
</head>
<body onLoad="screenscroll();">
<SCRIPT LANGUAGE="JavaScript">
function screenscroll(){
 var optlist = document.form1.Text1;
 optlist[0] = null;
 optlist.selectedIndex = 0;
 setTimeout("screenscroll()",2000);
}
</script>
<form name="form1">
<select name="Text1" size=8>
<option>
<option>世界名著及作者
<option>乌托邦 作者：莫 尔
<option>威尼斯商人 作者：莎士比亚
<option>简.爱 作者：夏绿蒂.勃朗特
<option>唐璜 作者：拜 伦
<option>呼啸山庄 作者：艾米莉.勃朗特
<option>鲁宾逊飘流记 作者：笛 福
<option>名利场 作者：萨克雷
<option>傲慢与偏见 作者：简.奥斯丁
<option>双城记 作者：查尔斯.狄更斯
<option>恋爱中的女人 作者：D.H.劳伦斯
<option>新工具 作者：培 根
<option>政府论 作者：洛 克
<option>尤里西斯 作者：詹姆斯.乔伊斯
<option>赫克尔贝里.芬历险记 作者：马克.吐温
<option>老人与海 作者：海明威
<option>飘 作者：玛格丽特.米切尔
<option>嘉莉妹妹 作者：德莱塞
<option>小妇人 作者：路易莎.梅.奥尔科特
<option>悲惨世界 作者：雨果
<option>约翰.克里斯朵夫 作者：罗曼.罗兰
<option>幻灭 作者：巴尔扎克
<option>欧叶妮.格朗台 作者：巴尔扎克
<option>贝姨 作者：巴尔扎克
<option>邦斯舅舅 作者：巴尔扎克
<option>格兰特船长的儿女 作者：儒勒.凡尔纳
<option>漂亮朋友 作者：莫泊桑
<option>娜娜 作者：左 拉
<option>包法利夫人 作者：福楼拜
<option>基督山伯爵 作者：大仲马
<option>茶花女 作者：小仲马
<option>巴黎圣母院 作者：雨 果
<option>红与黑 作者：司汤达
<option>拿破仑法典 作者： 拿破仑
<option>人是机器 作者：拉美特里
<option>社会契约论 作者：卢 梭
<option>浮士德 作者：歌 德
<option>少年维特的烦恼 作者：歌 德
<option>希腊神话故事 作者：施瓦布
<option>战争论 作者：克劳塞维茨
<option>忏悔录 作者：奥古斯丁
<option>父与子 作者：屠格涅夫
<option>罪与罚 作者：陀思妥耶夫斯基
<option>安娜.卡列宁娜 作者：列夫.托尔斯泰
<option>复活 作者：列夫.托尔斯泰
<option>上尉的女儿 作者：普希金
<option>死魂灵 作者：果戈理
<option>童年 作者：高尔基
<option>我的大学 作者：高尔基
<option>钢铁是怎样炼成的 作者：尼.奥斯特洛夫斯基
<option>白痴 作者：陀思妥耶夫斯基
<option>伊索寓言 作者：伊索.拉封丹
<option>理想国 作者：柏拉图
<option>政治学 作者：亚里士多德
<option>安徒生童话 作者：安徒生
<option>牛虻 作者：伏尼契
<option>堂.吉诃德 作者：塞万提斯
<option>汉穆拉比法典 作者：汉穆拉比
<option>论神 作者：斯宾诺莎
<option>癞皮鹦鹉 作者：利萨尔迪
<option>* 作者：康帕内拉
<option>性爱与文明 作者：弗洛伊德
<option>苔丝 作者：哈代
<option>拉摩的侄儿 作者：狄德罗
<option>理智与情感 作者：奥斯汀
<option>权力意志 作者：尼采
<option>苦闷的象征 作者：厨川白村
<option>梦的解析 作者：弗各伊德
<option>资本论 作者：马克思
<option>先知 作者：纪伯伦
<option>俄罗斯的童话 作者：高尔基
<option>桃色的云 作者：爱罗先轲
<option>水晶瓶塞 作者：莫里斯.勒布朗
<option>乡村医生 作者：巴尔扎克
<option>高龙巴 作者：梅里美
<option>黄室奇案 作者：嘉斯东.勒鲁
<option>克菜采奏鸣曲 作者：列.托尔斯泰
<option>阴谋与爱情 作者：席勒
<option>快乐王子 作者：王尔德
<option>变形记 作者：卡夫卡
<option>羊脂球 作者：莫泊桑
<option>魔沼 作者：乔治.桑
<option>死魂灵 作者：果戈里
<option>希腊棺材之谜 作者：奎恩
<option>母亲 作者：高尔基
<option>被背叛的遗嘱 作者：米兰.昆德拉
<option>毁灭 作者：法捷耶夫
<option>绞刑架下的报告 作者：伏契克
<option>贵族之家 作者：屠格涅夫
<option>冷血医生 作者：玛丽.希金斯.克拉克
<option>十日谈 作者：薄伽丘
<option>女富翁的遗产 作者：高木彬光
<option>绿野仙踪 作者：莱曼.弗兰.鲍姆
<option>法国中尉的女人 作者：约翰.福尔斯
<option>汤姆.索亚历险记 作者：马克.吐温
<option>马可.波罗游记 作者：马可.波罗
<option>卡门 作者：梅里美
<option>.美丽与悲哀 作者：川端康成
<option>野性的呼唤 作者：杰克.伦敦
<option>吉卜赛姑娘 作者：塞万提斯
<option>浅滩迷船 作者：里縸
</select>
</form>
</body>
</html>

The above is the detailed content of Introduction to how JavaScript implements automatic scrolling of Select list content. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

See all articles